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>

我使用这个workaround-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>

这可能是一个错误吗？因为在Twitter Bootstrap页面上它说:

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

这是一个重现我的问题的JSFiddle.

Answer 1

可能最简单的解决方法是删除两个inputs 之间HTML中的空格:

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

至:

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

Answer 2

我设法使用网格系统:

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