Twitter Bootstrap - 表單字段頂部的標籤不對齊

Question

我試圖創建一個窗體元素並排，和他們的標籤（與各自的輸入元素的開始對齊），就像這樣：

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

下不能按預期工作，因爲「Label2的」是與輸入元素稍有不對齊：

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

我得到了它使用此解決辦法十歲上下結構的工作：

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

所以這可能是一個錯誤？因爲在Twitter Bootstrap page它說：

使用.span1到.span12輸入匹配相同大小的網格列。

Here's a JSFiddle重現我的問題。

Answer 1

也許最簡單的解決方法是刪除空格在HTML兩個input S之間：

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

到：

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

Answer 2

是錯位的原因是第一<input>後的空白。這個空格似乎是一箇舊的瀏覽器「功能」：它們在<input>之後加上Unicode空格（U + 0020）字符，緊接着是<input>，除非它們在標記中位於同一行。

可以減少祖先的字體大小爲0，所以這個空間將不可見：

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

Answer 3

我設法利用網格系統來做到這一點：

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