Bootstrap 5 网格
Bootstrap 5 网格
Bootstrap 5 网格系统
Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。
如果您不想单独使用所有 12 列，那么可以将这些列组合在一起，以创建更宽的列：
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
网格系统响应迅速，列会根据屏幕大小自动重新排列。
请确保总和等于或小于 12（如果不需要使用所有 12 个可用列）。
网格类
Bootstrap 5 网格系统有六个类：
.col-(超小型设备 - 屏幕宽度小于 576px).col-sm-(小型设备 - 屏幕宽度等于或大于 576px).col-md-(中型设备 - 屏幕宽度等于或大于 768 像素).col-lg-(大型设备 - 屏幕宽度等于或大于 992 像素).col-xl-(xlarge 设备 - 屏幕宽度等于或大于 1200px).col-xxl-(xxlarge 设备 - 屏幕宽度等于或大于 1400px)
您可以组合上述类，以创建更动态和灵活的布局。
提示：每个类都是按比例放大的，所以如果你想为 sm 和 md 设置相同的宽度，你只需要指定 sm。
Bootstrap 5 网格的基本结构
以下是 Bootstrap 5 网格的基本结构：
<!-- 控制列宽，以及它们在不同设备上的显示方式 -->
<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 或 xxl，而第二颗星代表数字，每行加起来应为 12。
第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，以创建等宽的列：两个 "col" 元素 = 每个 col 为 50% 宽度，而三个 cols = 每个 col 为 33.33% 宽度。四个列 = 25% 宽度，等等。您还可以使用 .col-sm|md|lg|xl|xxl 使列获得响应性。
下面我们整理了一些基本的 Bootstrap 5 网格布局的例子。
三等分列
下例显示如何在所有设备和屏幕宽度上创建三个等宽列：
示例代码：
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>三个等宽列</h1>
<p>提示：请尝试在行类中添加一个 class="col" 的新 div - 将创建四个等宽的列。</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
响应式列
下例显示了如何从平板电脑开始创建四个等宽的列，然后扩展到超大桌面。在宽度小于 576px 的手机或屏幕上，列会自动堆叠在一起：
示例代码：
<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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>响应式列</h1>
<p>调整浏览器窗口大小可查看效果。</p>
<p>当屏幕宽度小于 576 像素时，列将自动堆叠在一起。</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
两个不等的响应式列
下例显示了如何在平板电脑得到两个不同宽度的列并扩展到超大型桌面：
示例代码：
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>调整浏览器窗口大小可查看效果。</p>
<p>当屏幕宽度小于 576 像素时，列将自动堆叠在一起。</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：您将在本教程的后面学习有关 网格系统 的更多内容。
