Bootstrap 栅栏系统

栅栏系统是通过定义容器大小，并将其等分12份，通过一系列行（row）与列（column)，结合媒体查询制作成强大的响应式栅格系统。

工作原理：

• 数据行（row）必须包含在 .container(固定宽度) 或 .container-fluid（100%宽度）中。以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过行（row）在水平方向上创建一组列（column），随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。。
• 通过列（row）设置padding属性来创建列之间的间隔。通过.row设置负值margin从而抵消.container元素设置的padding（简介为行（row）所包含的列（column）抵消padding，也即后面实例中向外突出的原因）。

• 超过12列，多余的列另起一行

  栅栏参数表：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 768px) {
  .container {
    width: 750px;
  }
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
  @media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

如上，栅栏系统最外层区分了四种宽度的浏览器：

Describe	Width	Class Prefix
超小屏	<768px(auto)	.col-xs-
小屏	>=768px(750ox)	.col-sm-
中屏	>=992px(970px)	.col-md-
大屏	>=1200px(1170px)	.col-lg-

基本用法：
创建一个响应式行：

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

1.通过更改数字合并列(列总和<=12)

        <div class="container">
            <div class="row">
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-8" style="border:1px solid #1B6D85;">.col-md-8</div>
            </div>
            <div class="row">
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6" style="border:1px solid #1B6D85;">.col-md-6</div>
                <div class="col-md-6" style="border:1px solid #1B6D85;">.col-md-6</div>
            </div>

2.列排序
改变列的方向，就是改变左右浮动，并且设置浮动的距离。（通过添加类名“col-md-push-number”和“col-md-pull-number”）

<div class="container">
            <div class="row">
                <div class="col-md-4 col-md-push-8" style="border: 1px solid silver;">.col-md-4</div>
                <div class="col-md-8 col-md-pull-4" style="border: 1px solid silver;">.col-md-8</div>
            </div>
        </div>

3.列的嵌套

<div class="container">
    <div class="row" style="border: 1px solid red;">
        <div class="col-md-8">
            <!--嵌套,将父层宽度视为100%-->
            <div class="row">
                <div class="col-md-6" style="border: 2px dashed green;">col-md-6</div>
                <div class="col-md-6"style="border: 2px dashed green;">col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>