bootstrap（关于栅格布局）

      栅格系统是通过行（.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">

   

 

转载于:https://www.cnblogs.com/yezi-dream/p/6067744.html