栅格系统

一、栅格选项

超小屏幕
(新增规格)<576px 		小屏幕
次小屏≥576px 		中等屏幕
窄屏≥768px 		大屏幕
桌面显示器≥992px 		超大屏幕
大桌面显示器≥1200px
.container 最大宽度 None (auto) 540px 720px 960px 1140px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列（column）数 12
列间隙 30px (每列两侧各15px)
可嵌套性 Yes
可排序性 Yes

二、自动布局列

1，等宽布局

三分之一空间占位
三分之一空间占位
三分之一空间占位
三分之一空间占位
三分之一空间占位

3，手机断点

实践中，一个<div class="col"></div>或<div class="col-N"></div>代表手机断点

4，等宽布局

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

5，等宽多行

等宽多行的处理方法，引用w-100进行切割分行。.w-100似乎与.clearfix有时可以达到同样的网页效果。

Column
Column
Column
Column

6，设置一列宽度

1 of 3
2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
3 of 3
1 of 3
2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
3 of 3

7，可变宽度的弹性空间

使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

三、响应式的class选择器

1,覆盖所有设备

col
col
col
col
col-8
col-4

2,水平堆砌

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

3,混合布局

定义在超小屏幕下1列全宽、1列半宽，而其它场景以8:4比例并行排列

.col-12 .col-md-8
.col-6 .col-md-4

定义在超小屏幕下以6:6比例并行排列，而其它场景以4:4:4比例并行排列

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

定义所有屏幕下1以6:6比例并行排列

.col-6
.col-6

4,沟槽

可以通过特定于断点的填充和负边距实用程序类来响应地调整装订线。 要更改给定行中的装订线，请在.row 上配置负边距实用程序，并在.col上配对匹配填充实用程序。 可能需要调整.container或.container-fluid 父级以避免不必要的溢出，再次使用匹配的填充实用程序.

这是一个在大(lg) 断点及以上定制Bootstrap网格的示例。 我们使用.px-lg-5增加了.col填充, 在父.row上使用.mx-lg-n5进行了抵消，然后使用.px-lg-5 调整了.container包装.

col py-3 px-lg-5
col py-3 px-lg-5
col py-1 px-lg-1
col py-1 px-lg-1

5，间隙沟槽(gutters)清除

BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，您可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

如果你需要无边缝设计(edge-to-edge design)，则请在父DIV中放弃.container与.container-fluid容器。

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

四、对齐

1,行列布局

使用 .row-cols-* 类能够定义一个row空间中可放的列数，并支持不同的断点如.col-*、 .col-md-4，注意需要要写在 .row空间之中。

Bootstrap最大定义到.row-cols-6：

定义每行显示两列：

Column
Column
Column
Column

定义每行显示三列（多余的则换行排列）：

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

2,垂直对齐

上边贴齐
上边贴齐
上边贴齐s
上下居中对齐
上下居中对齐
上下居中对齐
下边对齐
下边对齐
下边对齐
上边对齐
上下居中对齐
下边对齐

3,水平对齐

左贴齐对齐
左贴齐对齐
居中贴齐
居中贴齐
右贴齐对齐
右贴齐对齐
间隔相等对齐帖齐
间隔相等对齐帖齐
两端对齐帖齐
两端对齐帖齐

4,列换行

如果在一行内子DIV定义的栅格总数超过12列，BootStrap会在保留列完整的前提下，将无法平行布局的多余列，重置到下一行，并占用一个完整的新行。

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.

五、重排序

1,Class顺序重定义

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

1号空间-未定义序号，位置不变。
2号空间-排最后。
3号空间-放第1但受1号空间不变影响居第2位。

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

1号空间-未定义顺序。
2号空间-未定义顺序。
3号空间-优先排序，占第1位。

六、列偏移

可以使用两种方式进行列偏应：
1、使用响应式的.offset-*栅格偏移方法。
2、使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具。

1,class偏移选择器

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

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

除了在响应断点处清除列，您可能需要重置偏移量，下面的栅格示例展示了这一点：

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

2,Margin移动布局

在BootStrap V4中，你可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类水平隔离的效果。

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto

七、列嵌套

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

.col里面必须加一个 .row才能嵌套， .col不能直接嵌套 .col

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6