使用方法

2.3.1基本用法

容器Container包含行row，行row包含列col-*-*。每行包含12栅格，如果定义的列超过12格，则自动换行。

实例2-2：grid1.html

2.3.2列偏移

不想让两个相邻的列挨在一起，可以使用栅格系统中列偏移功能来实现。其类为：.col-xs-offset-*、 .col-sm-offset-*、 .col-md-offset-*、 .col-lg-offset-*，其中*为数字，表示向右偏移的列数，其值不能大于12。同时，这里也需要注意偏移列和显示列综合不能超过12，如果超过12，则换到下一行。

实例2-3：gridoffset.html

2.3.3列排序

列排序其实就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统中，可以通过.col-X-push-* 和.col-X-pull-*来实现这一目的。其中，col-X-push-*是向右浮动，col-X-pull-*是向左浮动，X代表xs、sm、md、lg，对应不同的屏幕大小，*代表浮动的列等份（1~12的数字）。

实例2-4：gridsort.html

2.3.4列嵌套

栅格系统支持列的嵌套，即在一个列里再声明一个或多个行（row）。注意，内部所嵌套的row的宽度为100%，就是当前外部列的宽度。

实例2-5：gridnest.html

2.3.5响应式栅格

在不同宽度的屏幕上呈现不同的演示效果。

实例2-6：gridresp.html

2.3.6清除浮动

Bootstrap提供的.clearfix样式可以清除所有的col-样式的左浮动。

实例2-7：gridfloat.html

本次课程源代码

Bootstrap2.rar