重排序，列偏移，列嵌套


发布时间：2020-03-16 20:18    作者： 晖哥哥   已过去：3 年   阅读总量：1395 已被赞：0

Class顺序重定义：不手动调换div位置，使用order来改变在页面的显示顺序。

使用 .order-* class选择符，可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-12 12个级别的顺序，在五种浏览器和设备宽度上都能生效。

还可以使用.order-first，快速更改一个顺序到最前面，同时其它元素也相应的获得了order:-1的属性，这个属性也可以与。.order-*混合使用。

<div class="container">

<div class="row">

<div class="col">

111

</div>

<div class="col order-12">

222

</div>

<div class="col order-1">

<!-- <div class="col order-first"> -->

333

</div>

</div>

</div>

列偏移

可以使用两种方式进行列偏应：

1、使用响应式的.offset-*栅格偏移方法。

2、使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具。

1. class偏移选择器

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。

<div class="container">

<div class="row">

<div class="col-4" style="background:#007bff;">

111

</div>

<div class="col-4 offset-4" style="background:#28a745;">

222

</div>

</div>

</div>

offset-4 让div水平向右移动距离

2. Margin移动布局

在BootStrap V4中，你可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类似于水平隔离的效果。简单来说就是两端对齐。

<div class="container">

<div class="row">

<div class="col-4" style="background:#007bff;">

111

</div>

<div class="col-4 ml-md-auto" style="background:#28a745;">

222

</div>

</div>

</div>

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）数量推荐不要超过12个（其实，没有要求你必须占满12列-否则应对页面进行重新规划布局）。

<div class="container">

<div class="row">

<div class="col-md-4">

111

</div>

<div class="col-md-8">

<div class="row">

<div class="col-md-4">

222

</div>

<div class="col-md-8">

333

</div>

</div>

</div>

</div>

</div>

点赞

0


登陆后方可评论

年 月 归 档
点 赞 最 多
同 类 推 荐