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

Question

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

documentation说:

Content should be placed within columns, and only columns may be immediate children of rows.

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

文档内容:

Content should be placed within columns, and only columns may be immediate children of rows.

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

文档的下方是这样说的:

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows

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

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

您已经为您的标签提供了background-color，这正是您看到差异的原因。看，当应用了 col-xx- 样式的标签时，它的行为就像一个 Bootstrap 列，即它得到 15px 的填充。因此标签文本从 15px 填充开始，即使标签本身从边缘开始。但是，当您将 label 包装在 div 中并将 col-xx- 样式应用于包装 div 时，然后此 div 获取填充，label 在此填充之后开始。

这种差异在您的设计中显而易见。

这段代码会让它更清晰:(注意“Email”标签，它是一个 label with col -xx- 即标签样式为 Bootstrap 列。然而，“密码”标签包裹在 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>

这里有一个 fiddle 供您使用:http://jsfiddle.net/abhitalks/gkkwevnz/

.