Bootstrap 网格系统

网格系统基础

网格系统的原理

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

• 使用行来创建列的水平组。

• 内容应该放置在列内，且唯有列可以是行的直接子元素。

• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。

• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过

• .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

基本网格实例

<div class="container">
<div class="row" >
<div class="col-md-2" style="background-color: yellow;height: 300px">
</div>
<div class="col-md-6" style="background-color: #0f0f0f;height: 300px">
</div>
<div class="col-md-4" style="background-color: #2aabd2;height: 300px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: red;height: 300px">
</div>
<div class="col-md-6" style="background-color: blue;height: 300px">
</div>
</div>
</div>

网格系统的列重置

• 当该布局右方不需要添加div，而在第二行又需要div时，可使用.clearfix,可理解为clear:right;
  <div class="clearfix visible-xs"></div>
• 当然你也可以在右边添加一个空的div

列偏移

• 也可使用列偏移来进行布局这个更标准col-*-offset-*
  <div class="col-xs-6 col-md-offset-3"
  上一行代码值在小型设备上占六格宽度，向右便宜三格

嵌套列

• 这个没的说