第18课第2页:Bootstrap栅格系统高级用法

1. 栅格系统的垂直对齐

使用 align-items-* 类可以控制整行中列的垂直对齐方式。

顶部对齐
顶部对齐
居中对齐
居中对齐
底部对齐
底部对齐

使用 align-self-* 可以控制单个列的垂直对齐:

顶部
居中
底部

2. 栅格系统的水平对齐

使用 justify-content-* 类控制列的水平对齐。

左对齐
左对齐
居中对齐
居中对齐
右对齐
右对齐
两端对齐
两端对齐
均匀分布
均匀分布

3. 列排序

使用 order-* 类来更改列的顺序:

默认排序1
默认排序2
默认排序3
视觉顺序3
视觉顺序1
视觉顺序2

4. 列偏移

使用 offset-* 类来偏移列:

col-md-4
col-md-4 offset-md-4
col-md-3 offset-md-3
col-md-3 offset-md-3

5. 列间隙

使用 mx-*px-* 类来控制列间的间隙:

增加内边距的列
增加内边距的列
居中的列 (col-5 mx-auto)

6. 栅格嵌套

在一个列内再嵌套一个完整的栅格系统:

外层 col-sm-8
内层 col-sm-6
内层 col-sm-6
外层 col-sm-4