BootStrap栅格布局的实现

用过Bootstrap的人估计都会觉得它的栅格布局特别好用，那么栅格布局是如何实现的呢？我们今天来研究一下。

参照bootstrap官网(http://v3.bootcss.com/css/#grid),栅格系统有如下的特点：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

提问：为什么必须放在.container或.container-fluid中？

我们先来看看这两个class实现了什么？参考bootstrap css代码。

.container {
    width: 1170px; //宽度值根据窗口大小变化
}

.container-fluid{
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto
}

.container设置了一个固定宽度，.container-fluid将row居中。container的作用可以理解，因为如果div设置了position属性且不为static或者设置了float那么div的宽度默认为0，实际宽度由内容的宽度决定。在这种情况下，如果使用row和col，栅格布局只会在内容的宽度内生效。

外层div默认宽度为0

设置container后，会以container的宽度栅格布局。

外层div默认宽度为0且设置container class

但是不太理解container-fluid的作用，它仅仅是将row居中显示了而已。感觉container和container-fluid不应该是或的关系。有哪位大神知道设置container-fluid的原因可以告诉我，先行谢过。

外层div默认宽度为0，设置container-fluid

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。

提问：1-12列是如何实现的？

这是我之前很好奇的地方，看过CSS之后就觉得没什么神奇了。我们以四列为例，看看CSS有什么神奇的地方。
代码：

<div class="container">
    <div class="row">
        <div class="col-lg-3 text-center"><div style="background-color: #1b86d7">  1  </div></div>
        <div class="col-lg-3 text-center"><div style="background-color: #1b86d7">  2  </div></div>
        <div class="col-lg-3 text-center"><div style="background-color: #1b86d7">  3  </div></div>
        <div class="col-lg-3 text-center"><div style="background-color: #1b86d7">  4  </div></div>
    </div>
</div>

列的CSS：

@media (min-width: 1200px)
bootstrap.min.css:5
.col-lg-3 {
    width: 25%;
}

@media (min-width: 1200px)
bootstrap.min.css:5
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
    float: left;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

重点 1.width:25%
这就是栅格排列的魔法，一行分四列，每列的宽度就是25%。同理，一行分三列，每列就是33.3333%。分12列就是8.3333%。

重点 2. position: relative;
div是块级元素默认是要换行的，但是把position设置为relative之后，column会在父级元素内进行定位和占位。因为所有的column有着同一个父级元素row，所以column会在row内排列。

重点 3.float:left;
设置元素浮动后会生成一个块级框，浮动元素的前一个元素不会受到任何影响，后一个元素会围绕着浮动元素。所以如果要达到并排显示多个块级元素的效果，需要给每个块级元素都设置float。

Bootstrap为了达到美观的效果，还设置了padding。让列与列之间留有空间。

BootStrap栅格布局的实现

推荐阅读更多精彩内容