Wejście do Bootstrap na Twitter Nie dołączaj pełnej szerokości kontenera

Question

Mam stronę zbudowaną na Twitter Bootstrap.

Podczas tworzenia formularza z dwiema kolumnami próbuję użyć klasy input-prepend, aby dodać ikonę wiadomości e-mail na lewo od danych formularza. Chcę, aby pole wejściowe wraz z ikoną przedrostka zawsze stanowiło 100% kontenera.

Oto mój kod:

     <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> 

Używając tego kodu, forma wygląda to zdjęcie:

ale kiedy zmiana rozmiaru przeglądarkę symulować mniejszy ekran, szerokość pola z add-on poprzedzany jest nieprawidłowo wielkości, jak widać tutaj:

PYTANIE

• Czy istnieje inny sposób ta forma powinna być zakodowana tak że pola wprowadzania & ikona w 100% i dopasować pozostałe pola?
• Czy muszę zmienić CSS w Bootstrap, aby to zmienić?

Answer 1

Okazuje się, że jest to znany problem i zostaną uwzględnione w wersji 3. [SOURCE]

Answer 2

Bootstrap 3 nie jest jeszcze na zewnątrz, więc tutaj jest mój prosty i działa rozwiązanie zarówno dla dołączania i przypadki prepend. Zawierać to po Bootstrap CSS/LESS plików:

.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; 
} 

Użyj go, jak to w kodzie HTML i pamiętać, trzeba użyć a tagów nie button dla przycisków w tym przypadku:

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