<div> <div> <div>.col-md-6</div> <div>.col-md-6</div> </div> <div> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> </div> <div> <div>.col-md-2</div> <div>.col-md-6</div> <div>.col-md-4</div> </div> </div>
实现的效果如下：
Bootstrap作为一个响应式框架当然不会只有那么简单的功能，我们继续往下走吧！
列偏移
在某些情况下，我们不希望相邻的列紧靠在一起，如果你希望不通过额外的margin或其他的手段来实现的话，Bootstrap内置为我们提供了列偏移（offset），这一系列的类来帮助我们实现想要的效果。
只需要给需要偏移的列元素上添加类名 col-md-offset-* ( 星号代表要偏移的列组合数 )，那么具有这个类名的列就会向右偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如：在列元素中添加 .col-md-offset-6 类将 .col-md-6 元素向右侧偏移了6个列（column）的宽度。
现在我们的代码是这样的：
<div> <div> <div>col-md-8 </div> <div>col-md-4 col-md-offset-2</div> <div>col-md-4 col-md-offset-1</div> </div> <p><br></p> <div> <div>col-md-4 </div> <div>col-md-3 col-md-offset-4</div> <div>col-md-4 col-md-offset-4</div> </div> </div>
可以实现的效果如下：
从实现的效果我们就能发现一些东西，注意 第二段的显示效果与代码 ，从那里我们可以发现：使用 col-md-offset-* 对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示。
其实原因也很简单：因为该类是对于列设置 margin-left ，并且我们在上面的源码展示中，也可以看有每一列都有着 float:left 的属性，从这些地方我们就不难发现在（偏移+列宽）超过12时，为何会换行显示了
列排序
列排序其实就是改变列的方向（顺序），就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (和上面一样，星号代表移动的列组合数)。
Bootstrap仅通过设置left和right来实现定位效果。通过查看源码，我们可以看到基本设置比较简单，如下：
.col-md-pull-12 { right: 100%; } /*...*/ .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; }
还是继续看看我们的实际效果吧！代码如下
<div> <div> <div>.col-md-4 col-md-push-8 </div> <div>.col-md-8 col-md-pull-4 </div> </div> <div> <div>.col-md-4 默认</div> <div>.col-md-8 默认</div> </div> </div>
我们可以发现列的位置已经发生了改变
列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（ .row ）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（ .row ），宽度为100%时，就是当前外部列的宽度。（其实就是在列中嵌套多个列，下面会有实际效果展示）
注意：被嵌套的行（ .row ）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列 -_- ）。
我们现在有这样一个需求：
创建一个8-4列网格。（备注：以中屏md（970px）为例）。
在第一个8列网格中插入8-4列网格。
在第二个4列网格中插入9-3列网格。
效果如下：
该如何实现呢？
<div> <div> <div> 我的里面嵌套了一个网格 <div> <div>col-md-8</div> <div>col-md-4</div> </div> </div> <div> 我的里面嵌套了一个网格 <div> <div>col-md-9</div> <div>col-md-3</div> </div> </div> </div> </div>
是不是很简单呢？当然为了完全实现和效果图一样的展示，我们还需要对CSS进行一些添加：
[class *= col-] [class *= col-] { background-color: #f36; border:1px dashed #fff; color: #fff; }
以上所述是小编给大家分享的Bootstrap入门书籍之（三）栅格系统，希望对大家有所帮助！
您可能感兴趣的文章: