5

我正在尝试创建一个表单元素并排放置，它们的标签（与相应输入元素的开头对齐）在它们之上，如下所示：

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 页面上它说：

将 .span1 到 .span12 用于匹配相同大小的网格列的输入。

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

4

3 回答 3

7

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

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

至：

<input type="text" class="span9" /><input type="text" class="span2" />
于 2012-09-19T11:00:48.577 回答
4

我设法使用网格系统做到了：

<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>
于 2013-06-20T21:09:55.527 回答
2

它未对齐的原因是 first 之后的空格<input>。这个空格似乎是旧浏览器的“功能”：它们在<input>紧随其后的 other之后添加 Unicode SPACE (U+0020) 字符<input>，除非它们在标记中的同一行上。

您可以将祖先的字体大小减小到 0，因此该空间将不可见：

.controls.controls-row { font-size: 0; }​
于 2012-09-19T11:17:59.813 回答