Twitter Bootstrap - Etiquetas en la parte superior de los campos de formulario no alineados

Question

Estoy tratando de crear un formulario con elementos de formulario uno al lado del otro, y sus etiquetas (alineadas con el principio del elemento de entrada respectivo) encima de ellos, como :

Label     Label2 
+----------------+ +-------+ 
+----------------+ +-------+ 

el siguiente no funciona como se esperaba, ya que "Label2" es ligeramente desalineado con el elemento de entrada:

<div class="controls controls-row"> 
    <label class="span9"><span>Label</span></label> 
    <label class="span2"><span>Label2</span></label> 
</div> 
<div class="controls controls-row"> 
    <input type="text" class="span9" /> 
    <input type="text" class="span2" /> 
</div> 

lo tengo para trabajar el uso de esta estructura de solución-ish:

<div class="controls controls-row"> 
    <div class="span9"> 
     <label><span>Label</span></label> 
    </div> 
    <div class="span2"> 
     <label><span>Label2</span></label> 
    </div> 
</div> 
<div class="controls controls-row"> 
    <div class="span9"> 
     <input type="text" class="span12" /> 
    </div> 
    <div class="span2"> 
     <input type="text" class="span12" /> 
    </div> 
</div> 

¿Podría ser esto un error? Debido a que en la Twitter Bootstrap page que dice:

Uso .span1 a .span12 para las entradas que coincidan con los mismos tamaños de las columnas de la cuadrícula.

Here's a JSFiddle que reproduce mi problema.

Answer 1

Probablemente la solución más fácil es eliminar el espacio en blanco en el código HTML entre las dos input s:

<input type="text" class="span9" /> 
<input type="text" class="span2" /> 

a:

<input type="text" class="span9" /><input type="text" class="span2" /> 

Answer 2

La razón es desalineada es un espacio en blanco después de la primera <input>. Este espacio en blanco parece ser una "característica" de navegadores antiguos: agregan el carácter Unicode SPACE (U + 0020) después de un <input> seguido inmediatamente por otro <input>, a menos que estén en la misma línea en el marcado.

Puede reducir el tamaño de fuente de ancestro a 0, por lo que este espacio no serán visibles:

.controls.controls-row { font-size: 0; }​ 

Answer 3

logré hacerlo usando el sistema de cuadrícula:

<div class="row-fluid"> 
    <div class="span9"> 
    <label>First name</label> 
    <input name="firstName" class="span12" placeholder="First name" type="text"> 
    </div> 
    <div class="span3"> 
    <label>Last name</label> 
    <input name="lastName" class="span12" placeholder="Last name" type="text"> 
    </div> 
</div>