重排序,列偏移,列嵌套


发布时间:2020-03-16 20:18    作者: Uncle Hui   已过去:6 月,2 周   阅读总量:234 已被赞: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




登陆后方可评论