Bootstrap4.x学习笔记【三】
栅格对齐与排列
一、栅格对齐
1.栅格系统中的行，可以进行垂直对齐操作。
| 样式(作用域行间) | |
| 居顶(默认) | .align-items-start |
| 居中 | .align-items-center |
| 居底 | .align-items-end |
2.栅格系统中的列来说，也有三种垂直居中的方法
| 样式(作用域列间) | |
| 居顶(默认) | .align-self-start |
| 居中 | .align-self-center |
| 居底 | .align-self-end |
3.不足 100%填充的行实现水平对齐方式
| 样式(作用域行间) | |
| 居左(默认) | .justify-content-start |
| 居中 | .justify-content-center |
| 居右 | .justify-content-end |
| 间隔相等(分散) | .justify-content-around |
| 两端对齐(分散) | .justify-content-between |
4.举例展示
栅格对齐与排列 第一列第二列第三列第一列第二列第三列第一列第二列第三列第一列第二列第三列第一列第二列第三列第一列第二列第三列
二、栅格排列
栅格的列可以排序，使用.order-N，N 最大值为 12
<div class="container"> <div class="row"> <div class="c col-3 order-3">第一列div> <div class="c col-3 order-1">第二列div> <div class="c col-3 order-2">第三列div> div> <div class="row"> <div class="c col-3 order-last">第一列div> <div class="c col-3">第二列div> <div class="c col-3 order-first">第三列div> div> <div class="row"> <div class="c col-3 offset-1">第一列div> <div class="c col-3">第二列div> <div class="c col-3 offset-2">第三列div> div> <div class="row"> <div class="c col-3">第一列div> <div class="c col-3 ml-2">第二列div> <div class="c col-3 ml-auto">第三列div> div> div>