一.CSS全局样式-栅格布局 1.基本结构 容器：.container/.container-fluid 行：.row 列：.col 2.针对不同的屏幕需要使用不同的列，如 大屏幕：4/12 三列 左中右 中等屏幕：6/12 两列 左右 小屏幕：12/12 一列 .col-xl-1/2/3/4…/12 .col-lg-1/2/3/4…/12 .col-md-1/2/3/4…/12 .col-sm-1/2/3/4…/12 Bootstrap中屏幕的尺寸划分： (1)xl:Extra large 超大屏幕 w>=1200px; (2)lg:large 大pc屏幕 1200px>w>=992px (3)md:medium 中等pc屏幕 991px>w>=768px (4)sm:small 小屏幕 767px>w>=576px (5)xs:Extra small 超小屏幕 576px>w 注意： col不添加数字时，自动布局同一行的每个列的宽度占比相等，如：两个col，各占50%，三个各占33.3%，可以用col设置布局时的等宽效果。 3.不同屏幕下列的适应性问题 col-xl-* 只能在xl屏幕下有效 col-lg-* 在lg/xl屏幕下都有效 col-md-* 在md/lg/xl屏幕下都有效 col-sm-* 在sm/md/lg/xl屏幕下都有效 总结：列可以在当前屏幕以及更大的屏幕下有效。 4.可以使用"列偏移"实现指定列以及其后的列向右偏移效果 列偏移通过offset--类来设置。 第一个号可以是sm/md/lg/xl表示不同屏幕尺寸的下的设置。 第二个号可以是1到11的数字，这些类会把一个列的左外边距增加*列 ex: .offset-md-4 在中等屏幕下把当前列往右偏移了4个列
