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

发布时间：2020-12-14 18:44:02 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个表单元素并排创建的表单,以及它们的标签(与相应输入元素的开头对齐),如下所示： Label Label2+----------------+ +-------++----------------+ +-------+ 以下内容无法正常工作,因为“Label2”与输入元素略有不对齐： div class="controls

我正在尝试创建一个表单元素并排创建的表单,以及它们的标签(与相应输入元素的开头对齐),如下所示：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!