热搜:NVER node 开发 php

【10】了解Bootstrap栅格系统基础案例(5)_html/css_WEB-ITnose

2024-11-24 16:35:01
【10】了解Bootstrap栅格系统基础案例(5)_html/css_WEB-ITnose

这次我们来说下列排序:

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

                        Bootstrap-Template-07                        

案例:列排序.col-md-push-* (推)和 .col-md-pull-*(拉)

.col-md-3 .col-md-3 .col-md-3 .col-md-3 .col-md-3 .col-md-push-3 .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9

看下运行效果图:

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

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

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

第三列被分为两份,第一份占有9列(使用col-md-push-3向右移动3列),第二份占有3列(使用col-md-pull-9向左移动9列)。