bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列

2020-04-28 08:16:16易采站长站整理

中文网的解释是:通过使用

.col-md-push-*
.col-md-pull-*
就可以很容易的改变列的顺序。

通过代码实现了,看到效果了,对于这句话的理解我还是没有摸透。

复制代码
<div class=”page-header”>
<h1>案例:列嵌套</h1>
</div>
<div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-2 col-md-push-4″>.col-md-2 .col-md-push-4</div>
</div>
<div class=”row”>
<div class=”col-md-7″></div>
<div class=”col-md-5 col-md-pull-4″>.col-md-5 .col-md-push-4</div>
</div>

可以看出,我定义了三行。

第一行被平均分成三份,每份占有四列。这一行主要是为了与下面两行进行对照的。

第二行里只有一个元素且是占有两列,然后对此元素也添加了.col-md-push-4的样式类。(让占有两个列的元素又向右移动了4列那么现在就是占据了第五列和第六列。)

第三列被分为两份,第一份占有七列,不过是空的,然后第二份占有五列,并且对此元素也添加了一个.col-md-pull-4的样式类,当然此类和上一行附加的类应该正好有相反的效果。(让占有5列的元素又向左移动了四列,原来是从第八列开始的,那么现在是从第四列开始的。)

现在来看一下效果展示