开发者学堂课程【移动Web前端开发：Bootstrap-栅格系统-扩展】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8445
Bootstrap-栅格系统-扩展
内容介绍
一、可嵌套
二、偏移(offsets)
三、列排序
一、可嵌套
列嵌套就是在列里面再嵌套列，要使一整块再分成两个等份就是列嵌套。
class 等于col-xs-6 两等份是6，但这时没有高度没有样式，所以在 style 中加入样式.container 往下一层一层找到 div，高度为 30px，边框为 1px，单实线，颜色为白色，如：
. container > .row > div > div{
height: 30px;
border: 1px solid #fff
}
<div class=”row”>
</div>
通过这两个类名可以在类或者列里面再嵌套一个列，这就是列嵌套，其实这个嵌套不光嵌套在列里面还可以嵌套在任何容器里面，不管是 content 还是 div 都可以，只要有参数就行，因为这里面的参数是根据副容器计算，副容器有参数就行。
观察效果图发现列嵌套两边有缝隙，想要清除缝隙就要再建立一个样式，div 下再建立 row，将代码列嵌套代码再移入 row 中，对应样式中也要做改变，此时代码为：
. container > .row > div .row> div{
height: 30px;
border: 1px solid #fff
}
刷新查看效果为：
缝隙成功被清掉这也是 row 的一个作用。
二、偏移(offsets)
现在两个模块正好占据了一行，此时如果想前面空两等份，后面排两等份紧接着排六等份，可以在前面排一个四等份的，但是多加了一个元素，只能要求两个元素进行排列。所以要使用不定位，此时如果第一个容器等份变为2，则
此时运行效果和想象有偏差，应该把这个容器挪到与右边对齐，虽然使用left产生偏移很方便，但是这个时候应该用偏移(offsets)，让容器整体偏移四等份就过来了。
col-xs-offset-4">
运行效果为：
产生偏移效果的核心代码是 col-xs-offset-4，其中的4表示往右偏移4份，也可以是*号，取值几就是几等份。这是常用的，拿来就可以用。
三、列排序
假设 div 为 row，再假设一个 div 分为3等份，和9等份，加起来12正好占一行，中间打印内容方便观察，代码为：
<div class=”row”>3
</div>
运行效果为：
那如果想要9和3的等份位置反着来，也只要颠倒顺序就行，但是如何在不改变条件的情况下满足这个需求呢，像让3向右浮动让9向左浮动，也是可以的，可是如果现在是3+4+5等份的话这种方法就行不通了，采用的浮动越多就越复杂，此时使用定位更方便，只要把3等份 right 定为0，或者9等份 left 定为0，9应该往左移三个等份，right 应该是占25%，另一个占75%。但 Bootstrap 有几个类就能实现这样的效果，col 同样是列，push 推1，此时刷新代码：
col-xs-push-1 ">3
此时 push3 往后移了1等份，所以要移动到最右边应该push9等份，9移动到最左边应该 push3 等份，如：
col-xs-push-9 ">3
col-xs-pull-3 ">9
查看网页源代码可以看到 col-xs-3 col-xs-9 距离为75%的定位三等份的距离，col-xs-3 col-xs-push-3 为 25% 的定位，所以 col-xs -push-*是排序的意思，往后推几份。col-xs-pul1-* 排序中是往前拉几份。就算有多个格子也可以通过这样的方式排序。
