bootstrap笔记-栅格布局

时间：2023-08-30 21:06:56

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在后

相关文章