Jak kontrolować rozmiar danych wejściowych w .input-group za pomocą .input-group-addon (Bootstrap3)?

Question

A Mam formularz w tabeli i wszystkie moje rozmiary pól są dobrze dopasowane. Ale mam jedno pole daty z dodatkiem grupy -input, co powoduje, że kontrola rozmiaru nie działa zbyt dobrze. Czy istnieje sposób, aby to naprawić?

Próbowałem kilka sposobów, aby mniejszy wkład, ale dodatek przestał być dołączone: http://jsfiddle.net/93MpC/1/

Kod z Fiddle:

<div class="table-responsive"> 
<table class="table table-bordered"> 
    <tr class="form-group"> 
    <td><label class="field-label required-field">Name:</label></td> 
    <td><div class="input-group"> 
     <input type="text" name="name" required id="id_name" class="form-control"> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"> 
     <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"><div class="row"> 
     <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
     <td><label class="field-label">Birthdate:</label></td> 
     <td><div class="input-group"> 
     <div class="row"> 
      <div class="col-lg-3"> 
      <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
      <div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
      </div> 
      </div> 
     </div></td> 
    </tr> 
</table> 
</div> 

Dzięki z góry!

Answer 1

Właściwy kod HTML dla tego żądania res inny poziom zagnieżdżenia. Więcej informacji można znaleźć w dokumentacji input groups.

<td> z wielkości wejściowych i dodatek powinien wyglądać następująco:

<td class="row"> 
    <div class="col-md-6"> 
     <div class="input-group"> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</td> 

W .col-* klas dodać dopełnienie w lewo i prawo, więc jeśli jest to problem można usunąć go z odrobiną CSS.

Answer 2

Zaczerpnięte z kodu, dodałem połowę klasy do div rodzica. Oto css:

.half { 
    width: 50%; 
} 

I HTML (prawie to samo):

<div class="input-group half"><!-- here is .half --> 
    <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
    <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 

Edit Lub jeśli chcesz użyć col oto inna opcja:

<div class="row"> 
    <div class="col-md-3"> 
    <div class="row"> 
     <div class="col-md-3">Birthdate:</div> 
     <div class="col-md-9"> 
     <div class="input-group"> 
      <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
      <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Example