博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【10】了解Bootstrap栅格系统基础案例(5)
阅读量:5209 次
发布时间:2019-06-14

本文共 866 字,大约阅读时间需要 2 分钟。

这次我们来说下列排序:

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

转载于:https://www.cnblogs.com/huige728/p/3842315.html

你可能感兴趣的文章
在.net core上使用Entity FramWork(Db first)
查看>>
Eclipse中如何开启断言(Assert),方法有二
查看>>
System.Net.WebException: 无法显示错误消息,原因是无法找到包含此错误消息的可选资源程序集...
查看>>
压缩图片 待验证
查看>>
冲刺进度条7
查看>>
UIImage 和 iOS 图片压缩UIImage / UIImageVIew
查看>>
MongoDB的数据库、集合的基本操作
查看>>
JS 多种变量定义
查看>>
redis可执行文件说明
查看>>
ajax向后台传递数组
查看>>
剑指offer系列14:包含min函数的栈
查看>>
疯狂JAVA16课之对象与内存控制
查看>>
[转载]树、森林和二叉树的转换
查看>>
WPF移动Window窗体(鼠标点击左键移动窗体自定义行为)
查看>>
Java核心技术梳理-类加载机制与反射
查看>>
1593: [Usaco2008 Feb]Hotel 旅馆 (线段树)
查看>>
软件测试-----Graph Coverage作业
查看>>
POJO 与 JavaBean 的区别 !
查看>>
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
查看>>
Windows Phone 7手势识别左右滑动 非XNA
查看>>