Twitter Bootstrap輸入追加不是容器的全部寬度

我有一個網站建立在Twitter Bootstrap。Twitter Bootstrap輸入追加不是容器的全部寬度

當構建2列窗體時，我嘗試使用input-prepend類在窗體輸入的左側添加電子郵件圖標。我希望輸入字段和前置圖標一直是容器的100％。

這裏是我的代碼：

     <div class='row-fluid'> 
         <div class='span6'> 
          <div class='control-group' id='contactEmailControlGroup'> 
          <label for='contactEmail'>Email Address</label> 
           <div class='input-prepend'> <span class='add-on'><i class='icon-envelope'></i></span> 
           <input type='email' name='contactEmail' id='contactEmail' class='span11' placeholder='Your email address...' tabindex='3' required/> 
           <span class='help-inline formAlert' id='contactEmailError'> <i class='icon-edit formAlertIcon'></i> Please enter your email address </span> <span class='help-inline formAlert' id='contactEmailInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid email address </span> 
          </div> 
          </div> 
         </div> 
         <div class='span6'> 
          <div class='control-group'> 
          <label for='contactPhone'>Phone Number</label> 
          <input type='tel' name='contactPhone' id='contactPhone' class='span12' placeholder='Your phone number...' tabindex='4' required/> 
          <span class='help-inline formAlert' id='contactPhoneError'> <i class='icon-edit formAlertIcon'></i> Please enter your phone number </span> <span class='help-inline formAlert' id='contactPhoneInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid phone number </span> </div> 
         </div> 
         </div>

使用此代碼時，形式是這樣的截圖： Form correctly displaying on desktop

但是當我調整瀏覽器來模擬一個較小的屏幕，該場的寬度與add-on預謀的尺寸不正確，因爲在這裏看到： Form incorrectly displaying on tablet and phone

問題

是否有不同的方式這種形式應該進行編碼，使輸入場&圖標是100％和匹配等領域？
或者我需要在Bootstrap中更改哪些CSS來更改它？

來源

2013-01-02 adamdehaven

事實證明這是一個已知問題，將在第3版 [SOURCE]

來源

2013-01-03 13:11:27 adamdehaven

什麼關於現在的解決方法？（BS3可能還沒準備好一段時間。） –

@DavidJames - 你見過解決方法嗎？我還沒有。 – adamdehaven

Javascript可以做到這一點，但我不知道一個體面的CSS方法。 –

引導3還沒有出來加以解決，所以這裏是我的兩個追加和預先準備的情況簡單和工作方案。後引導CSS /減檔包含此：

.input-append.input-block-level, 
.input-prepend.input-block-level { 
    display: table; 
} 

.input-append.input-block-level .add-on, 
.input-prepend.input-block-level .add-on { 
    display: table-cell; 
    width: 1%; /* remove this if you want default bootstrap button width */ 
} 

.input-append.input-block-level > input, 
.input-prepend.input-block-level > input { 
    box-sizing: border-box; /* use bootstrap mixin or include vendor variants */ 
    display: table; /* table-cell is not working well in Chrome for small widths */ 
    min-height: inherit; 
    width: 100%; 
} 

.input-append.input-block-level > input { 
    border-right: 0; 
} 

.input-prepend.input-block-level > input { 
    border-left: 0; 
}

使用它像這樣在你的HTML記住，你必須使用a標籤沒有button在這種情況下，你的按鈕：

<div class="input-append input-block-level"> 
    <input type="text" /> 
    <a class="btn add-on">click</a> 
</div>

來源

2013-07-04 09:24:00 smajl

我剛剛試過你的代碼來解決我的問題：http://stackoverflow.com/questions/18255699/resizing-jasnys-bootstrap-fileupload-form 但它沒有按預期工作。問題在於現在有2個按鈕連同輸入字段在一行中。有任何想法嗎？ – aronadaal

@smajl - 這完美的作品。單詞無法表達你剛纔給我帶來的快樂。 –

即使是大膽的，我錯過了它必須是'a'標籤。 – Stone

Twitter Bootstrap輸入追加不是容器的全部寬度

回答

相關問題