
上QQ阅读APP看书,第一时间看更新
3.2.4 重排序
1.排列顺序
使用.order-*类选择符,可以对空间进行可视化排序,系统提供了.order-1到.order-12等12个级别的顺序,在主流浏览器和设备宽度上都能生效。
提示
没有定义.order类的元素,将默认排在前面。
【例3.10】排列顺序示例。

在IE 11浏览器中运行结果如图3-15所示。

图3-15 排列顺序效果
可以使用.order-first快速更改一个顺序到最前面,使用.order-last更改一个顺序到最后面。
【例3.11】order-first和order-last类示例。

在IE 11浏览器中运行结果如图3-16所示。

图3-16 order-first和order-last类效果
2.列偏移
在Bootstrap中可以使用两种方式进行列偏移。
■ 使用响应式的.offset-*类偏移方法。
■ 使用边距通用样式处理,它内置了诸如.ml-*、.p-*、.pt-*等实用工具。
1)偏移类
使用.offset-md-*类可以使列向右偏移,通过定义*的数字,则可以实现列偏移,如.offset-md-4则是向右偏移四列。

【例3.12】偏移类示例。

在IE 11浏览器中运行结果如图3-17所示。

图3-17 偏移类效果
2)使用margin类
在Bootstrap 4中,可以使用.ml-auto与.mr-auto来强制隔离两边的距离,实现水平隔离的效果。
【例3.13】使用margin类示例。

在IE 11浏览器中运行结果如图3-18所示。

图3-18 使用margin类效果