Bootstrap 4 网格
Bootstrap 4 网格系统
Bootstrap 的网格系统使用 Flexbox 构建，允许页面最多有 12 列。
如果您不想单独使用所有 12 列，可以将它们分组在一起以创建更宽的列
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
网格系统是响应式的，列会根据屏幕尺寸自动重新排列。
确保总和不超过 12（不需要使用所有 12 列）。
网格类
Bootstrap 4 网格系统有五种类
.col-（超小型设备 - 屏幕宽度小于 576px）.col-sm-（小型设备 - 屏幕宽度等于或大于 576px）.col-md-（中型设备 - 屏幕宽度等于或大于 768px）.col-lg-（大型设备 - 屏幕宽度等于或大于 992px）.col-xl-（超大型设备 - 屏幕宽度等于或大于 1200px）
上面的类可以组合在一起，以创建更多动态和灵活的布局。
提示：每个类都会向上扩展，因此如果您希望为 sm 和 md 设置相同的宽度，您只需要指定 sm。
Bootstrap 4 网格的基本结构
以下是一个 Bootstrap 4 网格的基本结构
<!-- 控制列宽度，以及它们在不同设备上的显示方式 -->
<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>
<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
第一个示例：创建一个行 (<div class="row">)。然后，添加所需的列数（带有适当的 .col-*-* 类的标签）。第一个星号 (*) 表示响应性：sm、md、lg 或 xl，而第二个星号表示一个数字，每行的数字应加起来为 12。
第二个示例：与其为每个 col 添加一个数字，不如让 bootstrap 处理布局，以创建等宽的列：两个 "col" 元素 = 每列 50% 的宽度。三个列 = 每列 33.33% 的宽度。四个列 = 25% 的宽度，等等。您也可以使用 .col-sm|md|lg|xl 使列具有响应性。
下面我们收集了一些基本的 Bootstrap 4 网格布局示例。
三个相等的列
.col
.col
.col
以下示例展示了如何在所有设备和屏幕宽度上创建三个等宽列
示例
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
尝试一下 »
响应式列
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
以下示例展示了如何从平板电脑开始，并扩展到超大型台式机，创建四个等宽列。 **在手机或小于 576 像素的屏幕上，列会自动堆叠在一起**
示例
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</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 4 网格的信息。
