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>
自己尝试一下→
<!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>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
第一个示例:创建一行 (<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 网格系统如何在不同屏幕尺寸上工作:
Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
---|---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
# of columns | 12 | 12 | 12 | 12 | 12 | 12 |
Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |