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-
(超小型设备 - 屏幕宽度小于 576 像素)
.col-sm-
(小型设备 - 屏幕宽度等于或大于 576 像素)
.col-md-
(中型设备 - 屏幕宽度等于或大于 768 像素)
.col-lg-
(大型设备 - 屏幕宽度等于或大于 992 像素)
.col-xl-
(超大设备 - 屏幕宽度等于或大于 1200 像素)
.col-xxl-
(xxlarge 设备 - 屏幕宽度等于或大于 1400 像素)
可以组合上面的类来创建更加动态和灵活的布局。
提示:每个类都会按比例放大,因此如果您想为 sm
和 md
,只需指定 sm
代码>.
以下是 Bootstrap 5 网格的基本结构:
<!-- Control the column width, and how they should appear on different devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<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"
元素=每列 50% 宽度,而三列=每列 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 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</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>
以下示例演示如何创建四个等宽列,从平板电脑开始并缩放到 超大桌面。 在宽度小于 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>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</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>
下面的示例展示了如何获取两个不同宽度的列,起始位置为 平板电脑并扩展到大型额外桌面:
<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 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</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>
提示:您将在本教程后面了解有关网格系统的更多信息。