内容必须在列中，但表单标签不是？

Question

在我的表单中，我有带标签的字段和不带标签的字段（即大文本区域）。我给标签和输入字段都设置了背景颜色。目前，标签的左边距与输入字段的左边距不同。

documentation 说：

内容应该放在列中，并且只能列 行的直接子代。

但是horizontal form example 将<label> 元素放在列中：

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
</div>

<label> 元素是一列，但它本身也是内容：

让标签和输入具有相同的左边距的一种简单方法是将标签放在一列内，而不是一列。这是最好的解决方案，还是有另一种方法让标签和输入具有相同的左边距？

Answer 1

文档内容：

内容应该放在列中，并且只能列 行的直接子代。

它必须在row 的上下文中解释。这意味着您不要将内容直接放在row 中，而是使用columns 来布局内容。这是因为，bootstrap 在列（第一个和最后一个偏移）上添加了一个标准的 15px 填充以进行干净的布局。

进一步的文档说：

列通过填充创建排水沟（列内容之间的间隙）。那 填充在第一列和最后一列的行中通过负偏移 .rows上的边距

注意：现在这个填充在您的用例中很重要。

如果您使用col-xx- 类来设置labels 的样式，或者将它们包装在div 中并将col-xx- 类应用于包装div，这并不重要。布局的净效果保持不变。

您为您的labels 提供了background-color，这正是您看到不同的原因。看，当应用了 col-xx- 样式的标签时，它的行为就像一个引导列，即它得到 15px 的填充。因此，即使标签本身从边缘开始，标签文本也从 15px 填充开始。但是，当您将 label 包裹在 div 中并将 col-xx- 样式应用于包裹 div 时，此 div 将获得填充，而 label 在此填充之后开始。

这种差异在您的设计中明显体现出来。

这个 sn-p 会让它更清晰：（注意“电子邮件”标签是 label 和 col-xx-，即标签样式为引导列。然而，“密码”标签被包裹在 div 中，应用了 col-xx- 样式。注意由于填充造成的差异。）

div.form-horizontal { border: 1px solid gray; }
textarea { width: 100%; }
label { background-color: silver; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/>
<div class="row">
<div class="form-horizontal col-xs-offset-2 col-xs-8 ">
    <div class="form-group">
        <label class="col-xs-12">Definitie</label>
        <div class="col-xs-12">
            <textarea></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
        <div class="col-xs-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-2">
            <label for="inputPassword3" class="control-label">Password</label>
        </div>
        <div class="col-xs-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
        </div>
    </div>
</div>
</div>

这里有一个小提琴供你玩：http://jsfiddle.net/abhitalks/gkkwevnz/

.