一、col-lg-*
<div class="container">
<div class="row">
<div class="col-lg-4">第一行.col-md-4</div>
<div class="col-lg-8">第一行.col-md-8</div>
</div>
<div class="row">
<div class="col-lg-4">第二行.col-md-4</div>
<div class="col-lg-4">第二行.col-md-4</div>
<div class="col-lg-4">第二行.col-md-4</div>
</div>
<div class="row">
<div class="col-lg-3">第三行.col-md-3</div>
<div class="col-lg-6">第三行.col-md-6</div>
<div class="col-lg-3">第三行.col-md-3</div>
</div>
</div>
col-lg-*：
-
当屏幕大于1200px的时候有效，效果如图
image.png
2.当屏幕小于1200px的时候发生改变，元素堆在一起。效果如图：
image.png
二、col-sm-*
<div class="container-full">
<div class="row">
<div class="col-lg-4 col-sm-4">第一行.col-md-4</div>
<div class="col-lg-8 col-sm-8">第一行.col-md-8</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4">第二行.col-md-4</div>
<div class="col-lg-4 col-sm-4">第二行.col-md-4</div>
<div class="col-lg-4 col-sm-4">第二行.col-md-4</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-3">第三行.col-md-3</div>
<div class="col-lg-6 col-sm-6">第三行.col-md-6</div>
<div class="col-lg-3 col-sm-3">第三行.col-md-3</div>
</div>
</div>
col-sm-*:
-
当屏幕大于最小临界值768px的时候正常显示，效果如图：
image.png -
当显示窗口小于最小临界值的时候，所有内容会堆叠在一起，效果如图：
image.png
注意： col-lg*/col-sm-*是根据屏幕尺寸大小来调整内容的分布，和其他因素有没有关系。
三、col-md-offset-*
<div class="container">
<div class="row">
<div class="col-md-2">第一行（1）.col-md-2</div>
<div class="col-md-2">第一行（2）.col-md-2</div>
<div class="col-md-2">第一行（3）.col-md-2</div>
<div class="col-md-2">第一行（4）.col-md-2</div>
<div class="col-md-2">第一行（5）.col-md-2</div>
<div class="col-md-2">第一行（6）.col-md-2</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2">第二行（1）.col-md-2</div>
<div class="col-md-2 ">第二行（2）.col-md-2</div>
<div class="col-md-2 ">第二行（3）.col-md-2</div>
<div class="col-md-2 col-md-offset-1">第二行（4）.col-md-2</div>
<div class="col-md-1 ">第二行5）</div>
</div>
</div>
- 列偏移：其中
*代表向右偏移的列数，偏移列和显示列总和不可以超过十二。 -
上图代码第一行为标准等分六列，第二行第一列向右偏移了两个列等分，第四列向右偏移了一个列等分。效果如下图：
image.png
注意：还有col-xs-offset-*/col-sm-oddset-*/col-offset-lg-*等写法
。
四、列排序
<div class="container">
<div class="row">
<div class="col-xs-2">(1) xs-2</div>
<div class="col-xs-2">(2) xs-2</div>
<div class="col-xs-2">(3) xs-2</div>
<div class="col-xs-2">(4) xs-2</div>
<div class="col-xs-2">(5) xs-2</div>
<div class="col-xs-2">(6) xs-2</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-pull-2" >(1) xs-2</div>
<div class="col-xs-2">(2) xs-2</div>
<div class="col-xs-2">(3) xs-2</div>
<div class="col-xs-2">(4) xs-2</div>
<div class="col-xs-2">(5) xs-2</div>
<div class="col-xs-2">(6) xs-2</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-push-2" >(1) xs-2</div>
<div class="col-xs-2">(2) xs-2</div>
<div class="col-xs-2">(3) xs-2</div>
<div class="col-xs-2">(4) xs-2</div>
<div class="col-xs-2">(5) xs-2</div>
<div class="col-xs-2">(6) xs-2</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-push-2" >(1) xs-2</div>
<div class="col-xs-2 col-xs-pull-2">(2) xs-2</div>
<div class="col-xs-2">(3) xs-2</div>
<div class="col-xs-2">(4) xs-2</div>
<div class="col-xs-2">(5) xs-2</div>
<div class="col-xs-2">(6) xs-2</div>
</div>
</div>
Bootstrap中提供了
col-X-push-* col-X-pull-*几个类，可以改变列的左右浮动的方向，push是向右浮动，pull向浮动。-
第一行为标准六等分；第二行第一列向左偏移2等分；第三行第一列向右偏移两个列等分，与第二列重合；第四行前两列调换位置。效果图如下：
image.png
五、列嵌套
<div class="container">
<div class="row">
<div class="col-md-6 rowFirst">
<div class="row">
<div class="col-md-6 nestedRow">内嵌一列</div>
<div class="col-md-6 nestedRow">内嵌二列</div>
</div>
</div>
<div class="col-md-6 rowFirst">第一行(2).col-md-6</div>
</div>
</div>
可以在一个列当中添加一个行或者多个行。行的宽度为100%，即当前列的宽度。
-
第一列嵌套了一个新的行，嵌套分成了两列，效果如图：
image.png
