Bootstrap 栅格系统

css12栅格系统

栅格系统：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来的。

Bootstrap的12栅格系统也就是把网页的总宽度平分为12份，开发人员可以自由按份组合，以便开发出简洁方便的程序。另外Bootstrap也提供了更加灵活的栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个div元素使用12等分的栅格，因为Bootstrap是按照百分比进行12等分的（保留了15位小数点精度）。

栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后再结合媒体查询，就制作出了强大的响应式的栅格系统。

栅格系统的主要工作原理如下：

一行数据（row）必须包含在.container中，以便为其赋予合适的对齐方式和内边距（padding）。

使用行（row）在水平方向创建一组列（column）

具体内容应当置于列（column）内，而且只有列可以作为行的直接子元素。

通过设置padding从而创建列（column）之间的间隔。然后通过为第一列和最后一列设置负值的margin从而抵消掉padding的影响。

列偏移

有的时候，我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

<div class="row edit-maincontent">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>