Twitter Bootstrap - Etykiety na polach formularzy nie są wyrównane

Question

Próbuję utworzyć formularz z elementami formularza obok siebie i ich etykiety (wyrównane z początkiem odpowiedniego elementu wejściowego) nad nimi, tak jak to :

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

Poniższa nie działa zgodnie z oczekiwaniami, ponieważ „Label2” jest nieco niezestrojone z elementem wejściowym:

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

dostałem go do pracy z zastosowaniem tego obejścia-owski strukturę:

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

Czy to może być błąd? Ponieważ na komputerze Twitter Bootstrap page jest napisane:

Użyj .span1 do .span12 dla wejść pasujących do tych samych rozmiarów kolumn siatki.

Here's a JSFiddle, który odtwarza mój problem.

Answer 1

Prawdopodobnie najprostszym rozwiązaniem jest usunięcie spacji w kodzie HTML między dwoma input s:

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

do:

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

Answer 2

Powodem jest to mylące jest spacja po pierwszym <input>. Ta biała spacja wydaje się być "funkcją" starej przeglądarki: dodają znak Unicode SPACE (U + 0020) po <input>, po którym następują inne <input>, chyba że znajdują się w tej samej linii znaczników.

Można zmniejszyć rozmiar czcionki przodka 0, więc to miejsce nie będzie widoczny:

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

Answer 3

udało mi się zrobić to za pomocą systemu sieci:

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