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>