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 网格 class 分配给标题标签会被认为是不好的做法？我想不出任何这样的原因，但我总是看到这样的 classes 只用于 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

Its not good idea and practice

每个元素 html 标签都应该在一个部分内，这意味着我们应该使用 div 和 span 。div 标签用于定义文档的一个部分。使用 div 标签，您可以将大部分 HTML 元素组合在一起，并使用 CSS.because 格式化它们 div 默认情况下没有 属性 / 样式但其他标签自然有一些 styles.if 你为 div 应用 类 它反应完美但其他标签我们应该覆盖样式然后只反应我们期望的 style.i 希望澄清你的疑问好的做法请通过它 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

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