Bootstrap 4 网格 - 大型
大型网格示例
| 超小 | 小 | 中 | 大 | 超大 | |
|---|---|---|---|---|---|
| 类名前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 屏幕宽度 | <576px | >=576px | >=768px | >=992px | >=1200px |
在上一章中，我们展示了一个网格示例，其中包含了适用于小型和中型设备的类。我们使用了两个 div（列），并在小型设备上分别分配了 25% 和 75% 的宽度，在中型设备上分别分配了 50% 和 50% 的宽度。
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
但在大型设备上，33% 和 66% 的分配可能更适合设计。
大型设备定义为屏幕宽度从 **992 像素到 1199 像素** 的设备。
对于大型设备，我们将使用 .col-lg-* 类
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
现在 Bootstrap 将会说：“在小型尺寸上，查看包含 -sm- 的类并使用它们。在中型尺寸上，查看包含 -md- 的类并使用它们。在大型尺寸上，查看包含 -lg- 的类并使用它们。”
以下示例将导致小型设备上 25% 和 75% 的分配，中型设备上 50% 和 50% 的分配，大型和超大型设备上 33% 和 66% 的分配。在超小型设备上，它将自动堆叠（100%）
.col-sm-3 .col-md-6 .col-lg-4
.col-sm-9 .col-md-6 .col-lg-8
示例
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己尝试 »
注意：确保总和加起来不超过 12（不需要使用所有 12 个可用列）
仅使用大型
在下面的示例中，我们只指定了 .col-lg-6 类（不使用 .col-md-* 和/或 .col-sm-*）。这意味着大型和超大型设备将按 50% 和 50% 分配。但是，对于中型、小型和超小型设备，它将垂直堆叠（100% 宽度）
示例
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己尝试 »
自动布局列
在 Bootstrap 4 中，有一种简单的方法可以为所有设备创建等宽列：只需从 .col-lg-* 中删除数字，并在指定数量的 **col 元素** 上只使用 .col-lg 类。Bootstrap 将识别有多少列，每列将获得相同的宽度。
如果屏幕尺寸 **小于 992 像素**，列将水平堆叠
<!-- 两列：大型及以上设备上 50% 宽度-->
<div class="row">
<div class="col-lg">1 of 2</div>
<div class="col-lg">2 of 2</div>
</div>
<!-- 四列：大型及以上设备上 25% 宽度 -->
<div class="row">
<div class="col-lg">1 of 4</div>
<div class="col-lg">2 of 4</div>
<div class="col-lg">3 of 4</div>
<div class="col-lg">4 of 4</div>
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
