栅格布局

1、web页面中，布局方式有三种

2、栅格的概念

我们把每一行布局分成12分
元素的占地宽度靠份数定义

3、栅格属性

1.使用栅格必须放在.container中,或者.container-fluid中
2.每一行每一个row，弹性，主轴x，可以换行，有-15px的左右外边距
3.使用col-n，来声明元素在row中占几份
自带左右-15px的内边距

4、响应式的栅格布局

一行四列，大屏幕1:1:1:1 中屏幕 两个一行1:1/1：1
小屏幕 每个单独一行
col-*-n *：xl/lg/md/sm n:1-12
在不同屏幕下占一行的多少份
ex：col-lg-3 col-sm-6
注意
.row的-15px左右外边距
和.col的15px左右内边距，会导致布局对不齐
项目中要进行处理

5、 .col

使用.col类，不添加数据，自动处理布局
没有给col平均分配空间，col可以超过12个,并且不换行

6、boot媒体查询的兼容性问题

boot中的媒体查询，小屏幕向大屏幕兼容
sm兼容md /lg/xl
md兼容lg/xl
lg兼容xl

7、列偏移

offset-*-n *：sm/md/lg/xl n：0~11
col向右偏移n份

8、栅格嵌套

请在col中单独写出div.row