bootstrap笔记-栅格布局

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. .clearfix

这个类可以在栅格布局中起到一个不占空间的clear的作用，如下：可以尝试带.clearfix和不带它的区别

<div class="container-fluid" >
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example. </div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>

2.在col栅格内再增加.row可以再次嵌套内部嵌套满12则占满这个col栅格，不满则只占该col栅格的X/12。

3.通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。 ???

push将在前，pull将在后

4.栅格总结：row应该在container或者container-fluid中，col应该在row中，col-xs-x决定了占十二分之几的大小，offset将按12百分比来向右偏移，.clearfix可以不占位置的清楚两边，push在前pull在后