Bootstrap 网格
Bootstrap 网格系统
Bootstrap 的网格系统允许页面上有最多 12 列。
如果您不想单独使用所有 12 列，可以将列组合在一起以创建更宽的列。
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 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 网格的内容。
