css全局样式中bootstrap的栅格布局（基本布局，列偏移，列嵌套，列排序）
栅格布局的基本简介
一.bootstrap内置了一套响应式，移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预容器：“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%）宽度中，以便于其古语合适的排列（aligment）和内补（padding）。
rem:实际上是设置列的高度的属性，rem的值是整数，代表的高度是rem值*字体像素大小。
二.栅格布局的参数
【css全局样式中bootstrap的栅格布局（基本布局，列偏移，列嵌套，列排序）】
文章图片
bootstrap把屏幕横向分成了12列，
屏幕分成下面几个端
<768px xs屏（超小屏）手机端 .col-xs-
768-992px sm屏（小屏）平板 .col-sm-
992-1200px md屏（中屏）中等pc .col-md-
>1200px lg屏（大屏） 大pc .col-lg-
（1）当浏览器的屏幕小于768px xs屏是是这样的效果： 
文章图片
（2）当屏幕大于768px小于等于992px sm屏是这样的效果：
文章图片
（3）当屏幕大于992px小于等于1200px md屏是这样的效果： 
文章图片
（3）当屏幕大于1200px lg屏是这样的效果： 
文章图片
三.列偏移
使用.col-xx屏-offset-xx份数 类可以将列向右侧偏移，也就是添加了左侧的margin。 
文章图片
记得引包。。。。
四.列嵌套
使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 
文章图片
五.列排序
.col-md-push-份数 是把元素向右推动几份数
.col-md-pull-份数 是把元素向左拉动几份数 
文章图片
盒子111是向后推动了8份。
盒子222是向前拉了四份。
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 3.css浮动
- react-navigation|react-navigation 动态修改 tabBar 样式
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- 06|06 | 全局锁和表锁 （给表加个字段怎么有这么多阻碍（（待评论）））
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- CSS兼容性笔记
- 微信小程序____CSS篇之定位（position）及浮动（float）