Bootstrap 网格基础
Bootstrap 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数:
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
Bootstrap 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
网格类
Bootstrap 网格系统有以下 4 个类:
xs超小设备（手机，小于 768px）sm小型设备（平板电脑，768px 起）md中型设备（台式电脑，992px 起）lg大型设备（大台式电脑，1200px 起）
可以将上面的类组合起来创建更具动态性和灵活性的布局。
Bootstrap 网格的基本结构
以下代码为 Bootstrap 网格的基本结构:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
首先，创建一行 (<div
class="row">)。然后， 添加是需要的列(.col-*-* 类中设置)。请注意 .col-*-* 中的数字每行加起来应该是 12。
下面我们收集了一些 Bootstrap 网格布局的示例。
创建三个相等宽度的列
.col-sm-4
.col-sm-4
.col-sm-4
下面的示例显示了如何从平板电脑开始获得三个等宽列，并扩展到大型台式机。在移动电话或小于768px宽的屏幕上，列将自动堆叠:
实例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
亲自试一试 »
二个不等宽的列
.col-sm-4
.col-sm-8
以下示例显示了如何获得两个不同宽度的列，从平板电脑开始，扩展到大型台式机:
实例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
亲自试一试 »
提示: 在本教程的后面部分，您将了解有关 Bootstrap 网格的更多信息。
