Bootstrap中的栅格系统

栅格系统：
xl为超大屏，屏幕宽度>=1200px,容器的宽度固定为1140px，一行可以设置12列，屏幕尺寸<1200的时候，一行只能设置1列
lg为为大屏，屏幕宽度>=992px，容器的宽度固定为960px，一行可以设置12列，屏幕尺寸<992的时候，一行只能设置1列
md为中等屏，屏幕宽度>=768px，容器的宽度固定为720px，一行可以设置12列，屏幕尺寸<768的时候，一行只能设置1列
sm为小屏，屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12列，屏幕尺寸<576的时候，一行只能设置1列
col为超小屏，屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列

设置等宽列，平分宽度，通过.col的class去设置
设置多行等宽列，在希望断开的地方添加一个.w-100的class，能够让后面的列换行
设置根据内容调整列的宽度，使用.col-{breakpoint}-auto
设置所有尺寸下，都占同样的列数，使用.col-*

混合排列或者组合模式
1.超大屏幕下一行显示6个div，一个div应该占2列
2.大屏幕下一行显示4个div，一个div应该占3列
3.中等屏幕下一行显示3个div，一个div应该占4列
4.小屏幕下一行显示2个div，一个div应该占6列
5.超小屏幕下一行显示1个div，一个div应该占12列

对齐
垂直对齐：
1.行的对齐方式
align-itens-start 顶对齐
align-items-center 中间对齐
align-items-end 底对齐
2.列的单独对齐方式
align-self-start 顶对齐
align-self-center 中间对齐
align-self-end 底对齐
水平对齐
1.justify-content-start 左对齐
2.justify-content-center 居中对齐
3.justify-content-end 右对齐
4.justify-content-around 分散居中对齐（每个元素两侧的间距是相等的）
5.justify-content-between 左右两端对齐（元素之间的间距是自动平分的）

列排序：使用.order-{breakpoint}-* (1-12)
order-first代表排序在第一位，order-last代表排在最后一位
3.x的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-*l来排序

列偏移：使用offset-{breakpoint}-*

间距：使用margin工具可以让列之间产生间距
mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使左侧的列远离到最左边

嵌套：每一个列里面可以再继续执行，那嵌套里面的元素就会以父级的宽度为基准，再分12个列