用过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，栅格布局只会在内容的宽度内生效。
设置container后，会以container的宽度栅格布局。
但是不太理解container-fluid的作用，它仅仅是将row居中显示了而已。感觉container和container-fluid不应该是或的关系。有哪位大神知道设置container-fluid的原因可以告诉我，先行谢过。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。
提问：1-12列是如何实现的？
这是我之前很好奇的地方，看过CSS之后就觉得没什么神奇了。我们以四列为例，看看CSS有什么神奇的地方。
代码：
1
2
3
4
列的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。让列与列之间留有空间。