Bootstrap：可以将列类分配给标题标记

Question

这样做可以吗？

<div class="row">
    <h3 class="col-md-12"> ... </h3>
    <div class="col-md-6"> ... </div>
    <div class="col-md-6"> ... </div>
</div>

我的意思是，有没有理由将Bootstrap网格类分配给标题标记会被视为不良做法？我无法想到任何这样的理由，但我总是看到这些课程只用于div。

Answer 1

那不是个好主意。我这样做了：

<div class="row">
    <div class="col-md-12">
        <h3> ... </h3>
    </div>
    <div class="col-md-6"> ... </div>
    <div class="col-md-6"> ... </div>
</div>

.col-*-*类应仅用 进行布局！

Answer 2

这不是一个好主意，因为你正在混合布局和排版。

也就是说，使用bootstrap 3.3.4，这里是两个（直接）样式的比较（左边是h1，右边是col-xs-12）

如果你追溯并查看.css文件中的顺序，当它们不同时，虽然h1属性在某些情况下胜过col（直接和继承）属性，但它们不会搞砸那些影响布局（边距，填充，浮动，显示...） - 这些是相同的或非冲突的。

所以，实际上，你不会有任何问题，但是这可能会随着不同版本的Bootstrap或者你覆盖标准样式而改变。

Answer 3

  

这不是一个好主意和实践

每个元素html标签都应该在一个部分内，这意味着我们应该使用div和spans .div标签用于定义文档的一部分。使用div标签，您可以将大部分HTML元素组合在一起并使用CSS格式化它们。因为默认情况下div没有属性/样式，但其他标签自然会有一些样式。如果你应用div的类它反应完美但其他标签我们应该覆盖样式，然后才会对我们期待的样式做出反应。我希望澄清你对你的良好实践的怀疑，请仔细阅读click here

示例

<div class="row">
    <div class="col-md-12">
        <h3> ... </h3>
    </div>
    <div class="col-md-6"> ... </div>
    <div class="col-md-6"> ... </div>
</div>

Answer 4

我同意它不理想。网格元素仅用于布局，不应与标题混合使用。