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

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填充（第一次和最后一次偏移）以进行干净的布局。

文档中进一步说明了这一点：

  

列通过填充创建装订线（列内容之间的间隙）。那   padding在第一列和最后一列的行中通过负数偏移   .rows

上的保证金

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

如果使用label类对col-xx-进行样式处理或将它们包装在div中并将col-xx-类应用于包装{{t}，这并不重要{1}}。布局的净效果保持不变。

您为div提供了background-color，这正是您看到差异的原因。请注意，当应用了label样式的标签时，它的行为类似于引导列，即它获得15px填充。因此标签文本以15px填充开始，即使标签本身从边缘开始。但是，当您将col-xx-包裹在label并将div样式应用于包装col-xx-时，此div会获得填充和{{1}这个填充后开始。

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

此代码段会更清晰 ：（注意＆＃34;电子邮件＆＃34;标签div {{} 1}}即标签样式为bootstrap列。然后＆＃34;密码＆＃34;标签被包装在label内，其中应用了label样式。请注意由填充引起的差异。）

＆＃13;

＆＃13;

col-xx-

＆＃13;

div

＆＃13;

＆＃13;

＆＃13;

以下是您玩的小提琴：http://jsfiddle.net/abhitalks/gkkwevnz/