标签：
bootstarp的栅格化布局使得我们布局简单，我们只需要利用.container/.container-fluid,.row即可实现，其下是一个例子：
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
</div>
</div>
<div class="col-xs-6">
<div class="well">
</div>
</div>
</div>
</div>
上述例子是一个栅格化布局的简单利用，那么是怎么实现的呢？以.container-fluid为例
.container-fluid 样式定义如下：
.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
其主要作用是实现内容的居中,而其中的padding是为了实现内容不会从浏览器的边界开始，那么接下来就是.row
.row { margin-right: -15px; margin-left: -15px; }
貌似.row的margin值抵消了.container-fluid的margin值，内容还是从边界开始，这是为什么呢，这和其嵌套有关，先看下其列，以col-xs-6为例，
.col-xs-6 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.col-xs-6 { width: 50%; }
其中拥有padding值，使得内容并不会触碰到container-fluid,并且可以看出，每两个列之间的间距为30px;然后就来解答为什么.container-fluid和.row有padding与margin值，这是因为我们可以在一个列中在利用.row 进行栅格化布局，这样，就无需再加上.container样式。
标签：
原文地址：http://www.cnblogs.com/zsblogs/p/5527845.html
