【问题标题】: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 的情况。这是真的吗?为什么?

【问题讨论】:

    标签: css forms twitter-bootstrap label


    【解决方案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>

    使用控制标签类:

    &lt;label for="exampleInputEmail1" class='control-label'&gt;Email address&lt;/label&gt;

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

    【讨论】:

    • 感谢您的回答。我还注意到 .control-label 类也适用于 .form-horizontal(对于大于 768px 的浏览器)、.form-inline.navbar-form,更改边距/填充和/或定位
    • 是的,我还为表单内的每个
    猜你喜欢
    • 1970-01-01
    • 2011-09-29
    • 1970-01-01
    • 1970-01-01
    • 2016-04-13
    • 2014-10-11
    • 1970-01-01
    • 1970-01-01
    • 2014-10-12
    相关资源
    最近更新 更多