PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

原创
2016-06-24 12:01:52 1144浏览

这次我们来说下列排序:

通过使用 .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列)。

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。