bootstrap中的列排序?

本文介绍如何使用Bootstrap中的.col-md-push-* 和 .col-md-pull-* 类实现列的左右互换,通过调整列的浮动距离来改变布局方向。适用于网格系统的布局调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    今天看bootstrap文档学习的时候,看到列排序,发现浮动原来还能这么用,就找了源码看了看~

   列排序其实就是改变列的方向,也就是改变左右浮动,并且设置浮动的距离。在栅格系统里,可以通过.col-md-push-*和.col-md-pull-*来实现这一目的。先来看看效果示意图

默认情况下,col-md-9在左边,col-md-3在右边,如果要互换位置,需要将col-md-9列向右移动3个列的距离,也就是推3个列的offset,样式用col-md-push-3;而col-md-3则需要向左移动,也就是拉9个列的offset,样式用col-md-pull-9。读者可能会问,为什么不能用左右浮动呢?这是因为所有的列默认情况下都是左浮动,如果要使用左右浮动,那就不知道得修改多少列的左右浮动样式了。所以,作者在统一左浮动的基础上,通过设置left和right的值来实现定位显示。代码如下所示:

// 源码1125行

// 其他同理,上pull的设置类似,唯一不同的就是right和left的区别
.col-md-push-0 {  left: 0;}

.col-md-pull-12 {  right: 100%;}
.col-md-pull-11 {  right: 91.66666666666666%;}
.col-md-pull-10 {  right: 83.33333333333334%;}
.col-md-pull-9 {  right: 75%;}
.col-md-pull-8 {  right: 66.66666666666666%;}
.col-md-pull-7 {  right: 58.333333333333336%;}
.col-md-pull-6 {  right: 50%;}
.col-md-pull-5 {  right: 41.66666666666667%;}
.col-md-pull-4 {  right: 33.33333333333333%;}
.col-md-pull-3 {  right: 25%;}
.col-md-pull-2 {  right: 16.666666666666664%;}
.col-md-pull-1 {  right: 8.333333333333332%;}
.col-md-pull-0 {  right: 0;}

.col-md-push-12 {  left: 100%;}

// 其他同理,上pull的设置类似,唯一不同的就是right和left的区别
.col-md-push-0 {  left: 0;}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值