Bootstrap 网格

Bootstrap网格系统

Bootstrap 的网格系统允许页面上最多有 12 列。

如果您不想单独使用所有 12 列，可以将这些列分组在一起以创建更宽的列：

跨度 1

跨度 4

跨度 8

跨度 6

跨度 12

Bootstrap 的网格系统具有响应能力，并且列将根据屏幕尺寸自动重新排列。

Bootstrap网格系统有四个类：

可以组合上面的类来创建更加动态和灵活的布局。

以下是 Bootstrap 网格的基本结构：

第一的;创建一行（<div class="row">）。然后，添加所需的列数（带有适当的标签.col-*-*类）。请注意，其中的数字.col-*-*每行的总和应始终为 12。

下面我们收集了一些基本 Bootstrap 网格布局的示例。

.col-sm-4

以下示例演示如何获取从平板电脑开始并扩展到大型桌面的三个等宽列。在手机上或宽度小于 768px 的屏幕，列将自动堆叠：

.col-sm-4

.col-sm-8

以下示例展示了如何获取两个不同宽度的列（从平板电脑开始并扩展到大型桌面）：

提示：您将在本教程后面了解有关 Bootstrap 网格的更多信息。