<div class="col-sm-6 col-md-12">东西</div><!--/.col-sm-6 col-md-12 --><div class="clearfix visible-md"></div><div class="col-sm-6 col-md-4">东西</div><!--/.col-sm-6 col-md-12 --></div><!--/.row -->
无论如何,col-*-12 在嵌套情况下会派上用场,尤其是在表单中.
I see something like the following in code examples on StackOverflow and in themes for sale even (never in Bootstrap's examples).
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Words go here</p>
</div>
</div>
</div>
OR
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>Words go here</p>
</div>
</div>
</div>
It drives me nuts because both are incorrect for full width single columns as per Bootstrap's own documentation and common sense.
When do you actually use the grid system? When does col-*-12
come into play?
解决方案
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.
这篇关于col-*-12 (col-xs/col-sm/etc) 在 Bootstrap 3 中的使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!