栅格系统是通过行（.row）与列（column）的组合一起来创建页面布局的，所以只有列（column）可以作为行（row）的直接子元素，我们所要写的内容可以放在列里（column），不过在行的外层还需要定义一层来包含行（.row），这个外层为（.container）或者（.container-fluid），定义这一层是为了方便为行（.row）赋予合适的排列（aligment）和内补（padding）。
(.container)表示固定宽度，即行的宽度是固定的，而且水平居中，即使行的元素是块级元素，它也不会占满一行，这个固定的宽度是多少呢，bootstrap已经规定了，即如下：
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
(.container-fluid)表示100%宽度，即行的宽度100%，占满了一行
列与列的间隔通过设置列所在元素的padding属性，如果一行中包含的列的数量大于12，那么剩余的列就会作为一个整体另起一行，
根据屏幕大小，列所对应的类前缀分别为：
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
后面就可以写上你所想要的大小了，只要 <= 12 就可以了。
可以使用 （.col-md-offset-*）将列向右侧偏移，比如 .col-md-offset-3就是将列向右偏移3列。
在一列里还可以再次定义行（.row）和列实现栅格布局。
注意：
在列的这一部分里如果有自定义的class，需放在后面，即放在定义列的class后面，代码如下：
<li class="col-md-3 col-sm-6 col-xs-12" class="li_style">
当然，你也可以只使用一个class，将它们放在一起，那么这时放在哪都可以了。比如：放在后面
<li class="col-md-3 col-sm-6 col-xs-12 li_style">