网格系统

阅读6984

更新时间2025-08-11

堆叠/水平

网格系统

Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。

如果您不想单独使用所有 12 列，您可以将这些列组合在一起以创建更宽的列：

网格系统响应迅速，列会根据屏幕大小自动重新排列。

请确保总和等于或小于 12（不需要使用所有 12 个可用列）。

网格类

Bootstrap 5 网格系统提供六个类：

.col- (超小型设备 - 屏幕宽度小于 576px)
.col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
.col-md- (中型设备 - 屏幕宽度等于或大于 768px)
.col-lg- (大型设备 - 屏幕宽度等于或大于 992px)
.col-xl- (超大型设备 - 屏幕宽度等于或大于 1200px)
.col-xxl- (特大型设备 - 屏幕宽度等于或大于 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" 元素 = 每个列的 50% 宽度，而三个列 = 每个列的 33.33% 宽度。四列 = 25% 宽度等。您还可以使用 .col-sm|md|lg|xl|xxl 使列具有响应性。

网格选项

下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作：

	超小型 (<576px)	小型 (>=576px)	中型 (>=768px)	大型 (>=992px)	超大型 (>=1200px)	特大型 (>=1400px)
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
网格行为	始终水平	折叠开始，在断点之上水平	折叠开始，在断点之上水平	折叠开始，在断点之上水平	折叠开始，在断点之上水平	折叠开始，在断点之上水平
容器宽度	None (auto)	540px	720px	960px	1140px	1320px
适用于	手机竖屏	手机横屏	平板电脑	笔记本电脑	笔记本电脑和台式机	笔记本电脑和台式机
列的 #	12	12	12	12	12	12
Gutter 宽度	1.5rem (在列的每侧 .75rem )	1.5rem (在列的每侧 .75rem )	1.5rem (在列的每侧 .75rem )	1.5rem (在列的每侧 .75rem )	1.5rem (在列的每侧 .75rem )	1.5rem (在列的每侧 .75rem )
可嵌套	Yes	Yes	Yes	Yes	Yes	Yes
偏移	Yes	Yes	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes	Yes	Yes