Come controllare la dimensione dell'ingresso in .input-group con .input-group-addon (Bootstrap3)?

Question

A ha un modulo in una tabella e tutte le dimensioni del campo si adattano bene. Ma ho un datafield che ha un addon .input-group, un che sta facendo il controllo della dimensione non funziona molto bene. C'è un modo per risolverlo?

ho cercato alcuni modi per fare un ingresso più piccolo, ma l'addon smesso di essere allegata: http://jsfiddle.net/93MpC/1/

Il codice da 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> 

Grazie in anticipo!

Answer 1

L'HTML corretto per questo requi res un altro livello di nidificazione. Ulteriori informazioni sono disponibili nella documentazione input groups.

La <td> con il vostro ingresso dimensioni e addon dovrebbe assomigliare a questo:

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

I .col-* classi aggiungono padding a destra ea sinistra, quindi se questo è un problema che si può rimuovere con un po 'di CSS.

Answer 2

Preso dal tuo codice, ho aggiunto una metà della classe al div genitore. Ecco il css:

.half { 
    width: 50%; 
} 

E il codice HTML (quasi lo stesso):

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

Modifica Oppure, se si desidera utilizzare col ecco un'altra opzione:

<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