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

前端之家收集整理的这篇文章主要介绍了html – Twitter Bootstrap – 表单字段顶部的标签未对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个表单元素并排创建的表单,以及它们的标签(与相应输入元素的开头对齐),如下所示:
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 page它说:

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

Here’s a JSFiddle再现了我的问题.

解决方法

可能最简单的解决方法删除两个输入之间HTML中的空格:
<input type="text" class="span9" />
<input type="text" class="span2" />

至:

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

猜你在找的HTML相关文章