bootstrap栅格系统

栅格系统用一系列的行(row)与列(column)的组合布局页面，他将页面分为12列，可以根据需要分为大小不同的几部分，只要保证列的和为12，页面内容将会按照你的布局规划完美呈现。

使用方法

1.container（容器）

让页面上的内容根据屏幕大小区间的不同而有一个自适应的横向居中缩进

<div class="container">
  ...
</div>

2.栅格系统

• 添加 行(row)
  行必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

<div class="container">
  <div class="row">
    ...
  </div>
</div>

• 行(row) 中可以添加 列(column)
  但要保证列的和为12

<div class="container">
  <div class="row">
    <div class="row">
        <div class="col-md-8">col-md-8</div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>
</div>

3.栅格参数

示例：在同一个元素上使用多个样式，
当屏幕(<768px)，使用 .col-xs-； 当屏幕(>=768px)，使用 .col-sm-；
当屏幕(>=992px)，使用 .col-md-； 当屏幕(>=1200px)，使用 .col-lg-；

<div class="container">
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>

4.列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4元素向右侧偏移了4个列的宽度。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    <div class="col-md-2">.col-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
  </div>
</div>

5.嵌套列

可以在一个列里嵌套一个或多个行，然后在新加入的行中添加新的列

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>