col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3

Question

I see something like the following in code examples on StackOverflow and in themes for sale even (never in Bootstrap\'s examples).

        
                      

              相关标签:
       
      

Answer 1

If something is full width, you don't need it at all.

Learn: http://getbootstrap.com/examples/grid/

The correct html for both of the above examples is this:

<div class="container">

       <p>Words go here</p>

      </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class -->

If you want your columns to be full width, it will be under the last column class you used. The following will be full width below where the col-sm- min-width starts (so 767px and UNDER in a default download of Bootstrap 3.x).

<div class="row">
    <div class="col-sm-4">
     Stuff
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-8">
     Stuff
    </div><!-- /.col-sm-8 -->
</div><!-- /.row -->

Don't forget the outer .container or .container-fluid (one per grouping of content that does not change width). The .container or .container-fluid zeros out the negative margin on the .row so you won't get horizontal scroll bars.

The situations when you use col-*-12 is where you want a full width AFTER the min-width of the smaller column class:

<div class="row">
    <div class="col-sm-6 col-md-12">
     Stuff
    </div><!-- /.col-sm-6 col-md-12 -->
  <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4">
     Stuff
   </div><!-- /.col-sm-6 col-md-12 -->
</div><!-- /.row -->

Anyway, col-*-12 comes in handy in nesting situations, especially with forms.

Answer 2

Your frustration is right.. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> is totally redundant.

Because Bootstrap 3+ is mobile first, any col-classes you declare travel up, meaning they apply to the declared device (xs, sm, md, lg) and larger. So, col-xs-12 col-sm-12 is redundant. Just use col-xs-12 for the same effect.

Also, if you don't declare an xs class, the layout will default to col-*-12 once below the smalles col-class you do declare. e.g. <div class="col-sm-6"> is half-width on sm and up, but full-width on xs. Whereas <div class="col-md-6"> is half width on md and up, but full width on sm and xs.

This being said, you should always declare at least one col-class, so it gets the relevant padding and other styling specifics.