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

最简单的解决方法可能是删除两个input之间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>

Answer 3

它错位的原因是在<input>之后的空格。这个空白似乎是一个旧的浏览器＆＃34;功能＆＃34;：他们在<input>之后立即跟随其他<input>添加Unicode SPACE（U + 0020）字符，除非它们是相同的标记中的一行。

您可以将祖先的字体大小减少到0，这样这个空间就不可见了：

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

Twitter Bootstrap - 表单字段顶部的标签未对齐

3 个答案: