把所有的布局都看成一行,每行等分12份
布局:
(1)table布局①简单，易控制②语义错误，渲染效率低
(2)div+css布局①语义正确，渲染效率高②控制起来比较繁琐
(3)boot封装的栅格布局①简单，易控制，语义正确，渲染效率高，支持响应式②复杂的页面，不适合使用栅格

响应式栅格:

row>col-*-n —*xl/lg/md/sm —*n:1-12

详解:
row:弹性,主轴x,可换行,左右-15px外边距.会导致row占地宽度变大,经常需要清除
col:相对定位,左右15内边距,
no-gatters:讓當前row的左右邊距清除，並清除子元素中class含有col-的左右邊距
不帶數字的col類，自動處理佈局，平均分配，一行甚至可以超過12份
使用柵格，boot响应式向上兼容

列偏移

offset-xl/lg/md/sm(1-11),源码就是margin-left

弹性

d-sm/md/lg/xl-flex/none/block/inline-block/table
主轴:flex-*-row/row-reverse/column/column-reverse
主轴方向排列方式:justify-content-*-*