Html Twitter引导-表单字段顶部的标签未对齐

我试图创建一个表单，表单元素并排排列，其标签（与相应输入元素的开头对齐）位于其上，如下所示：

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>

标签
标签2

我用这种变通方法使它工作：

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

标签
标签2

那么这可能是一只虫子吗？因为上面写着：

对于与网格列的相同大小匹配的输入，请使用.span1到.span12

---

这再现了我的问题。

最简单的解决方法可能是删除HTML中两个

输入之间的空白：

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



致：

它未对齐的原因是第一个
后面有一个空格。这个空白似乎是一个古老的浏览器“功能”：它们在
后面添加Unicode空格（U+0020）字符，紧接着是其他
，除非它们在标记中位于同一行

您可以将祖先的字体大小减小为0，这样此空间将不可见：

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

我使用网格系统成功地做到了这一点：

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


名字
姓
我怎么会爱上这个x_x谢谢！我不建议这样做的原因是它在Safari中不起作用。此解决方案阻止您在子元素中使用相对字体大小（em/百分比）。可以在此处找到其他解决方案：这是最好的解决方案。
<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>