Twitter Bootstrap 3 la larghezza di inserimento del testo in linea dipende dalla larghezza dell'etichetta

Question

Ho notato uno strano comportamento di Twitter Bootstrap 3: la dimensione della casella di input dipende dalla dimensione dell'etichetta quando sono raggruppati con il gruppo di moduli:

<form class="form-inline"> 
    <div class="form-group"> 
     <label>A</label> 
     <input type="text" class="form-control" placeholder="First Name"> 
     </div> 
    <div class="form-group"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" placeholder="Last Name"> 
    </div> 
</form> 

Ecco demo: http://jsfiddle.net/a3vAP/4/

è questa funzionalità o bug? Quale sarebbe la soluzione? Ho bisogno di caselle di input della stessa dimensione.

Answer 1

L'etichetta più sta causando l'ingresso di essere più lungo dato che sono sia contenuta nello stesso form-group che utilizza display:inline-block quindi è dimensionamento automaticamente alla larghezza del label.

Secondo la documentazione Bootstrap ..

"Ingressi, seleziona, e textareas sono al 100% di larghezza di default in Bootstrap. Per utilizzare il modulo in linea, dovrete impostare una larghezza sul modulo Controlli utilizzati all'interno. "

Quindi, avresti bisogno di aggiungere un po 'semplice CSS per controllare la larghezza ..

.form-inline .form-group input { 
    width:140px; 
} 

Demo: http://bootply.com/87747