03 网格系统

//实现原理

<div class="container"> //必须在容器之内
　　<div class="row"> //最多12行
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　</div>
　　<div class="row">//行的意思
　　　　<div class="col-md-1">.col-md-1</div>//列的意思
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　</div>
　　<div class="row">
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　　　<div class="col-md-1">.col-md-1</div>
　　</div>
</div>

显示结果如下：

//工作原理

<div class="container">
　　<div class="row">
　　　　<div class="col-md-4">.col-md-4</div>
　　　　<div class="col-md-7">.col-md-7</div>//加在一起不能大于12
　　</div>
　　<div class="row">
　　　　<div class="col-md-4">.col-md-4</div>
　　　　<div class="col-md-4">.col-md-4</div>
　　　　<div class="col-md-4">.col-md-4</div>//加在一起不能大于12
　　</div>
　　<div class="row">
　　　　<div class="col-md-3">.col-md-3</div>
　　　　<div class="col-md-6">.col-md-6</div>
　　　　<div class="col-md-3">.col-md-3</div>//加在一起不能大于12
　　</div>
</div>
显示结果如下：

//列偏移

<div class="container">
　　<h4>列向右移动四列的间距</h4>
　　　　<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> //4+2+4+2 不能大于12
　　　　</div>
　　　　<div class="row">
　　　　　　<div class="col-md-4">.col-md-4</div>
　　　　　　<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div> //4+4+4 不能大于12
　　　　</div>
</div>
<br />
<h4>发生行断裂</h4>
　　<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> //4+2+4+2 不能大于12
　　　　</div>
　　<div class="row">
　　　　<div class="col-md-4">.col-md-4</div>
　　　　　　<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div> //4+4+4 不能大于12
　　　　</div>
　　<div class="row">
　　　　<div class="col-md-3">.col-md-3</div>
　　　　　　<div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
　　　　　　<div class="col-md-4">col-md-4</div>//3+3+3+4=13 >12 会另起一行
　　</div>
</div>

显示结果如下：

//列排序（两个列交换位置）

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

显示结果如下：

列交换位置：

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

　　　　<div class="col-md-4 col-md-push-8">.col-md-4</div>

　　　　<div class="col-md-8 col-md-pull-4">.col-md-8</div>

　　</div>

</div>

显示结果如下：

//列嵌套表格

<div class="container">
　　<div class="row">
　　　　<div class="col-md-8">
　　　　　　我的里面嵌套了一个网格
　　　　　　<div class="row">
　　　　　　　　<div class="col-md-6">col-md-6</div>
　　　　　　　　<div class="col-md-6">col-md-6</div>
　　　　　　</div>
　　　　　　<div class="row">
　　　　　　　　<div class="col-md-2">col-md-2</div>
　　　　　　　　<div class="col-md-2">col-md-2</div>
　　　　　　　　<div class="col-md-2">col-md-2</div>
　　　　　　　　<div class="col-md-2">col-md-2</div>
　　　　　　　　<div class="col-md-2">col-md-2</div>
　　　　　　　　<div class="col-md-2">col-md-2</div>
　　　　　　</div>
　　　　</div>
　　　　<div class="col-md-4">col-md-4</div>
　　</div>
　　<div class="row">
　　　　<div class="col-md-4">.col-md-4</div>
　　　　<div class="col-md-8">
　　　　　　我的里面嵌套了一个网格
　　　　　　<div class="row">
　　　　　　　　<div class="col-md-4">col-md-4</div>
　　　　　　　　<div class="col-md-4">col-md-4</div>
　　　　　　　　<div class="col-md-4">col-md-4</div>
　　　　　　</div>
　　　　　　<div class="row">
　　　　　　　　<div class="col-md-3">col-md-3</div>
　　　　　　　　<div class="col-md-3">col-md-3</div>
　　　　　　　　<div class="col-md-3">col-md-3</div>
　　　　　　　　<div class="col-md-3">col-md-3</div>
　　　　　　</div>
　　　　</div>
　　</div>
</div>

显示结果如下：