Bootstrap网格布局

一、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-*：

1. 当屏幕大于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-*:

1. 当屏幕大于最小临界值768px的时候正常显示，效果如图：

   
   image.png

2. 当显示窗口小于最小临界值的时候，所有内容会堆叠在一起，效果如图：

   
   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>

1. 列偏移：其中*代表向右偏移的列数，偏移列和显示列总和不可以超过十二。

2. 上图代码第一行为标准等分六列，第二行第一列向右偏移了两个列等分，第四列向右偏移了一个列等分。效果如下图：

   
   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>

1. Bootstrap中提供了col-X-push-* col-X-pull-*几个类，可以改变列的左右浮动的方向，push是向右浮动，pull向浮动。

2. 第一行为标准六等分；第二行第一列向左偏移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>

1. 可以在一个列当中添加一个行或者多个行。行的宽度为100%，即当前列的宽度。

2. 第一列嵌套了一个新的行，嵌套分成了两列，效果如图：

   
   image.png