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

在我的表单中，有带标签的字段和没有标签的字段，即一个大的文本区域。我为标签和输入字段都指定了背景色。目前，标签的左边距与输入字段的左边距不同

报告说：

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

但将元素放在列中：

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

元素是列，但它本身也是内容：

---

要使标签和输入具有相同的左边距，一个简单的方法是将标签放在列中，而不是列中。这是最好的解决方案，还是有其他方法使标签和输入具有相同的左边距？

文档说明：

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

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

进一步的文档说明如下：

列通过填充在列内容之间创建檐槽间隙。那个 第一列和最后一列的行距通过负数进行偏移 行上的边距

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

如果您使用col xx-classes设置标签的样式，或者将它们包装在一个div中，并将col xx-CLASSE应用于包装div，那么这实际上并不重要。布局的净效果保持不变

您已经为标签提供了背景色，这正是您看到差异的原因。请参阅，当应用了列xx样式的标签时，它的行为类似于引导列，即它得到15px的填充。因此，标签文本从15px填充开始，即使标签本身从边缘开始。但是，当您将标签包装在一个div中并将col xx-style应用于包装div时，这个div将获得填充，标签将在填充之后开始

这种差异是在您的设计中明显表现出来的

这段代码将使它更清楚：注意电子邮件标签，它是一个列为xx的标签，即标签样式为bootstrap列。然而，密码标签被包装在一个div中，应用了col xx样式。请注意由于填充而产生的差异

div.form-水平{边框：1px实心灰色；} text区域{宽度：100%；} 标签{背景色：银色；} 明确的 电子邮件 暗语

---

请创建工作小提琴以see@Gorostas当前位置您需要小提琴做什么？您不仅有一个表格组这正是我所想的，谢谢您的确认。