Bootstrap 的控制标签类有啥作用？

Posted 2023-03-06

【中文标题】Bootstrap 的控制标签类有啥作用？

【英文标题】：What does Bootstrap's control-label class do?Bootstrap 的控制标签类有什么作用？

【发布时间】：2016-09-11 22:43:03

【问题描述】：

.control-label Bootstrap 3 类将哪些 CSS 格式应用于<label> html 元素。 （我也遇到了使用 Chrome 的 devtools 定位该类的困难）

此外，在官方 Bootstrap 3 中documentation，.control-label 似乎仅用于.form-horizontal 的情况。这是真的吗？为什么？

【参考方案1】：

control-label 类对于验证状态很有用，这就是为什么我们在所有标签中都需要它，即使字段引导程序的文档没有提到。

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

如您所见，它使用的是控制标签类而不是标签元素。如果我们移除控制标签，我们会产生不希望的效果，即标签不会变成绿色。

没有控制标签类的垂直表单并且在表单组上成功：

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

使用控制标签类：

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

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

【讨论】：

感谢您的回答。我还注意到 .control-label 类也适用于 .form-horizontal（对于大于 768px 的浏览器）、.form-inline 和 .navbar-form，更改边距/填充和/或定位

是的，我还为表单内的每个 元素添加了控制标签，不仅用于验证。如果需要，它还可以帮助您通过选择器找出表单中的所有标签。