前端必知必会-Bootstrap 5 大网格

文章目录

Bootstrap 5 网格大
总结

Bootstrap 5 网格大

大网格示例

	XSmall	小	中	大	超大	XXL
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
屏幕宽度	<576px	>=576px	>=768px	>=992px	>=1200px	>=1400px

在上一章中，我们提供了一个网格示例，其中包含适用于小型和中型设备的类。我们使用了两个 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 个可用列）：

仅使用 Large

在下面的示例中，我们仅指定 .col-lg-6 类（不带 .col-md-* 和/或 .col-sm-*）。这意味着 large、xlarge 和 xxlarge 设备将拆分 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 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-lg-* 中删除数字，并仅在指定数量的 col 元素上使用 .col-lg 类。Bootstrap 将识别有多少列，并且每列将获得相同的宽度。

如果屏幕尺寸小于 992px，则列将水平堆叠：

<!-- 两列：大尺寸及以上宽度为 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

总结

本文介绍了Bootstrap 5 大网格的使用，如有问题欢迎私信和评论