Bootstrap 网格
Bootstrap 网格系统
Bootstrap 的网格系统允许在页面上最多有 12 列。
如果你不想使用所有 12 列，可以将它们分组在一起创建更宽的列
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
网格类
Bootstrap 网格系统有四个类
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 网格的内容。
