Bootstrap：是否可以将列类分配给标题标签

Question

Is it OK to do this?

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

I mean, is there any reason why assigning Bootstrap grid class to heading tags would be considered bad practice? I can't think of any such reason, but I always see such classes used only for div's.

Answer 1

That's not a good idea. I'd do this instead:

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

The .col-*-* classes should be used only for layout purposes!

Answer 2

It is not a good idea because you are mixing layout and typography.

That said, with bootstrap 3.3.4, here is a comparison of the (direct) styles from both (h1 on the left and col-xs-12 on the right)

If you trace back and look at the ordering in the .css file, when they are different, while h1 properties trump the col (direct and inherited) properties in some cases, they don't mess up the ones that affect layout (margin, padding, float, display...) - these are either same or non-conflicting.

So, practically, you wouldn't have any problems, but that could change with a different version of Bootstrap or if you override the standard styles.

Answer 3

Its not good idea and practice

every elements html tags should be inside a section ,that means we should use div and spans .div tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.because div by default no property / Styles but other tags naturally have some styles.if you apply the classes for the div it reacts perfect but other tags we should overwrite styles then only reacts what we are expecting style.i hope clarify your doubt for your good practice plz go through it click here

Example

<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

I would agree with it not being ideal. Grid elements are for layout only and shouldn't be mixed with headings.