Bootstrap的control-label类是做什么用的？

Question

在Bootstrap 3的.control-label类中，应用了哪些CSS格式化样式到HTML元素<label>上？（我在使用Chrome的开发者工具时也遇到了一些困难）

此外，在官方Bootstrap 3 文档中，.control-label似乎只在.form-horizontal情况下使用。这是真的吗？为什么？

- ira

Answer 1

控制标签类对于验证状态非常有用，因此我们需要在所有标签中使用它，即使字段bootstrap的文档没有提到。

当定义has-success、has-warning等类时，我们可以在bootstrap源代码中看到它：https://github.com/twbs/bootstrap/blob/bfb99413eefbbe2e8fbb1e477cbfa63ea7d36140/dist/css/bootstrap-rtl.css#L3242

正如您所见，它使用的是control-label类而不是label元素。如果我们删除control-label，则会出现不希望的效果，即标签不会变成绿色。

没有control-label类和form-group上的has-success的垂直表单：

<div class="form-group has-success">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>

使用 control-label 类：

<label for="exampleInputEmail1" class='control-label'>Email address</label>

这就是为什么我认为最好保留它！除非没有颜色是期望的效果。

- Ariful Haque

---

感谢你的回答。我还注意到，即使在大于768px的浏览器中，.control-label类也会应用于.form-horizontal，以及.form-inline和.navbar-form，改变边距/填充和/或定位。 - ira

是的，我也会为表单中的每个<label>元素添加control-label，不仅仅是为了验证。这还可以通过选择器帮助您找到表单中的所有标签。 - Cheung