Bootstrap-5-Grid-System-and-Responsive-Tools

CSS Bootstrap 栅格系统响应式组件库

字数统计: 3.8k阅读时长: 17 min

 2026/07/29 

第31课：Bootstrap 5 栅格系统与响应式工具

Bootstrap 5 的栅格系统是一套基于 Flexbox 的 12 列布局引擎，用于快速构建响应式页面。它通过预定义的 CSS 类名，将容器、行、列的尺寸与断点（Breakpoints）无缝结合，无需写一行自定义 CSS 即可实现复杂的自适应布局。本节课将深入拆解栅格系统的底层逻辑：容器如何限定宽度、行如何组织列、列宽如何按断点自动分配，以及偏移、排序、间距控制等高级技巧。

1. Bootstrap 5 的核心断点与容器

1.1 五个响应式断点

Bootstrap 5 使用五个断点将屏幕从小到大分层：

断点名称	类名前缀	最小宽度	典型设备
Extra small	无	< 576px	手机竖屏
Small	`sm`	≥ 576px	手机横屏
Medium	`md`	≥ 768px	平板
Large	`lg`	≥ 992px	小型桌面
Extra large	`xl`	≥ 1200px	桌面
Extra extra large	`xxl`	≥ 1400px	大屏桌面

所有响应式类名遵循模式：{property}-{breakpoint}-{value}。当断点省略时，表示所有屏幕尺寸（从 xs 开始）。

1.2 三种容器（Container）

容器是栅格系统的最外层元素，用于包裹和水平居中内容，并在每个断点处有不同最大宽度。

容器类名	行为
`.container`	在每个断点有一个固定最大宽度（`max-width`），水平居中。
`.container-fluid`	始终为 `width: 100%`，占满整个视口宽度。
`.container-{breakpoint}`	在指定断点以下为流体（`width: 100%`），达到断点后变为固定宽度。如 `.container-md` 在 ≥768px 时固定宽度。

<!-- 固定宽度容器：xs 全宽，sm 540px，md 720px，lg 960px，xl 1140px，xxl 1320px -->
<div class="container">
  <!-- 栅格内容 -->
</div>

<!-- 流体容器：始终 100% 宽度 -->
<div class="container-fluid">
  <!-- 栅格内容 -->
</div>

<!-- 中屏以下流体，中屏及以上固定 -->
<div class="container-md">
  <!-- 移动端全宽，平板以上固定宽度 -->
</div>

容器宽度对照表：

断点	`.container` 最大宽度	`.container-sm`	`.container-md`	`.container-lg`	`.container-xl`	`.container-xxl`
< 576px	100%	100%	100%	100%	100%	100%
≥ 576px	540px	540px	100%	100%	100%	100%
≥ 768px	720px	720px	720px	100%	100%	100%
≥ 992px	960px	960px	960px	960px	100%	100%
≥ 1200px	1140px	1140px	1140px	1140px	1140px	100%
≥ 1400px	1320px	1320px	1320px	1320px	1320px	1320px

2. 行（Row）与列（Column）：栅格的核心

2.1 `.row`：列的包装器

.row 是一个 Flex 容器（display: flex; flex-wrap: wrap;），其内部使用负外边距抵消容器的内边距，实现列与容器边缘对齐。每个 .row 的内部应只包含 .col-* 元素。

<div class="container">
  <div class="row">
    <!-- 列放在这里 -->
  </div>
</div>

原理：Bootstrap 的容器有 padding-left 和 padding-right（通常为 12px）。.row 设置 margin-left: -12px; margin-right: -12px; 来抵消，使列的内容与容器边缘视觉平齐。列本身也有 padding（12px）形成列间距。

2.2 列类（Col Classes）：基础用法

列类指定每列占 12 列中的多少份。最基础的列类不带断点前缀，适用于所有屏幕。

<div class="row">
  <div class="col">等分列（自动）</div>
  <div class="col">等分列（自动）</div>
  <div class="col">等分列（自动）</div>
</div>

当使用 .col（无数字）时，所有列将均分行空间。

类名	含义
`.col`	弹性均分剩余空间，所有 `.col` 等宽。
`.col-6`	占 6/12（50%）宽度（所有屏幕）。
`.col-sm-4`	在 ≥576px 时占 4/12 宽度，小于该断点则堆叠（全宽）。
`.col-md-3`	在 ≥768px 时占 3/12 宽度。
`.col-lg-2`	在 ≥992px 时占 2/12 宽度。

2.3 组合断点实现响应式列宽

列可以同时设置多个断点类，每个断点控制该尺寸及以上的列宽。未设置的断点将默认堆叠（每列 12 份，即全宽）。

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">列 1</div>
  <div class="col-12 col-md-6 col-lg-4">列 2</div>
  <div class="col-12 col-md-6 col-lg-4">列 3</div>
</div>

解析：

屏幕 < 768px：每列占 12/12（全宽，垂直堆叠）。
屏幕 ≥ 768px 且 < 992px：每列占 6/12（一行两列）。
屏幕 ≥ 992px：每列占 4/12（一行三列）。

2.4 自动宽度列（Auto-layout Columns）

均分列：使用 .col 不带数字。
内容自适应列：使用 .col-auto，列宽等于内容宽度，仅占据所需空间。
混合自动与固定：一个固定宽度的列 + 一个弹性列填满剩余空间。

<!-- 内容自适应 -->
<div class="row">
  <div class="col-auto">Logo</div>
  <div class="col">导航链接（填满剩余空间）</div>
</div>

3. 响应式工具类：`d-`、`flex-` 等

Bootstrap 5 的响应式工具类可直接控制元素的显示/隐藏、Flexbox 属性、间距等，与栅格无缝配合。

3.1 显示与隐藏：`d-{breakpoint}-{value}`

类名示例	效果
`d-none`	所有屏幕隐藏。
`d-md-none`	仅在 ≥768px 时隐藏。
`d-lg-block`	仅在 ≥992px 时显示为 `block`。
`d-flex`	所有屏幕使用 Flexbox。
`d-sm-inline-block`	≥576px 时显示为 `inline-block`。

常见场景：移动端显示汉堡菜单，桌面端隐藏；或移动端隐藏侧边栏。

1
2
3

<div class="d-none d-md-block">
  这段文字在平板及以上屏幕可见，手机端隐藏。
</div>

3.2 Flex 工具类

Bootstrap 提供了完整的 Flexbox 实用类，可直接在 HTML 中控制布局，无需编写 CSS。

类别	类名示例
方向	`flex-row`、`flex-column`、`flex-md-row-reverse`
主轴对齐	`justify-content-start`、`justify-content-center`、`justify-content-between`
交叉轴对齐	`align-items-center`、`align-items-stretch`
自身对齐	`align-self-start`、`align-self-end`
换行	`flex-wrap`、`flex-nowrap`
填充剩余空间	`flex-fill`
伸缩控制	`flex-grow-0`、`flex-shrink-0`

<div class="d-flex justify-content-between align-items-center">
  <span>左对齐</span>
  <span>右对齐（通过 justify-content-between）</span>
</div>

3.3 间距工具：`m-`、`p-`、`gap-*`

Bootstrap 5 使用统一的间距体系（0～5，以及 auto）。格式为 {property}{sides}-{breakpoint}-{size}。

属性	含义	侧面	含义
`m`	margin	`t`	top
`p`	padding	`b`	bottom
		`s`	left (start)
		`e`	right (end)
		`x`	left + right
		`y`	top + bottom
		空	四个方向

尺寸：0（0）、1（0.25rem）、2（0.5rem）、3（1rem）、4（1.5rem）、5（3rem）、auto（自动）。

1
2
3

<div class="mt-3 mb-md-4 px-2">
  <!-- 上外边距 1rem；中屏及以上下外边距 1.5rem；左右内边距 0.5rem -->
</div>

间隙工具（Bootstrap 5 新增）：

1
2
3

<div class="d-grid gap-3">
  <!-- Grid/Flex 容器的 gap 为 1rem -->
</div>

4. 列的对齐、偏移与排序

4.1 垂直对齐：`align-items-` 与 `align-self-`

在 .row 上使用 align-items-* 可垂直对齐所有列。在 .col 上使用 align-self-* 可单独对齐某列。

<div class="row align-items-center" style="height: 200px;">
  <div class="col">垂直居中</div>
  <div class="col">垂直居中</div>
  <div class="col align-self-end">底部对齐（覆盖）</div>
</div>

4.2 水平对齐：`justify-content-*`

.row 上使用 justify-content-* 控制列的水平分布。

<div class="row justify-content-center">
  <div class="col-4">居中排列</div>
  <div class="col-4">居中排列</div>
</div>

4.3 偏移（Offsets）

使用 .offset-{breakpoint}-{n} 可将列向右移动 n 列的空间。实现方式为 margin-left: n/12 * 100%。

1
2
3

<div class="row">
  <div class="col-md-4 offset-md-4">水平居中（md 以上）</div>
</div>

.col-md-4 占 4 列，offset-md-4 向右偏移 4 列，剩余空间（12 - 4 - 4）= 4 列被左右平分，效果为居中。

4.4 排序（Order）

使用 .order-{breakpoint}-{n} 控制列的视觉顺序（基于 Flex 的 order 属性）。数字越小越靠前。

<div class="row">
  <div class="col order-2 order-md-1">第一视觉（移动端第二）</div>
  <div class="col order-1 order-md-2">第二视觉（移动端第一）</div>
</div>

注意：order 仅改变视觉呈现，不改变 DOM 顺序，需谨慎处理可访问性。

5. 独立栅格类：`row-cols-*`

无需为每列单独写类，可在 .row 上使用 row-cols-{breakpoint}-{n} 统一指定每行的列数。

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
  <div class="col">卡片 1</div>
  <div class="col">卡片 2</div>
  <div class="col">卡片 3</div>
  <div class="col">卡片 4</div>
</div>

效果：手机每行 1 列，平板每行 2 列，桌面每行 4 列。内部 .col 无需指定宽度。

6. 综合实战：后台管理布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 栅格实战</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- 头部 -->
  <header class="bg-dark text-white py-3">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-auto"><h1 class="h5 mb-0">管理后台</h1></div>
        <div class="col d-none d-md-block">
          <nav class="d-flex gap-3">
            <a href="#" class="text-white text-decoration-none">仪表板</a>
            <a href="#" class="text-white text-decoration-none">用户</a>
            <a href="#" class="text-white text-decoration-none">设置</a>
          </nav>
        </div>
        <div class="col-auto d-md-none">
          <button class="btn btn-outline-light btn-sm">☰</button>
        </div>
      </div>
    </div>
  </header>

  <!-- 主体内容 -->
  <div class="container mt-4">
    <div class="row">
      <!-- 侧边栏：平板及以上占 3 列，手机端隐藏 -->
      <aside class="col-md-3 d-none d-md-block">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action active">概览</a>
          <a href="#" class="list-group-item list-group-item-action">订单</a>
          <a href="#" class="list-group-item list-group-item-action">产品</a>
        </div>
      </aside>
      <!-- 内容区：平板及以上占 9 列，手机端全宽 -->
      <main class="col-12 col-md-9">
        <h2>仪表板</h2>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
          <div class="col"><div class="p-4 bg-primary text-white rounded">统计卡片 1</div></div>
          <div class="col"><div class="p-4 bg-success text-white rounded">统计卡片 2</div></div>
          <div class="col"><div class="p-4 bg-warning text-white rounded">统计卡片 3</div></div>
        </div>
      </main>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

布局说明：

头部使用 .row + justify-content-between（未显式写，用 col 弹性填充），移动端显示汉堡图标，桌面端显示导航链接。
主体使用 .row，侧边栏在 md 及以上显示并占 3 列，内容区全响应式（col-12 col-md-9）。
统计卡片使用 row-cols-* 自动响应：移动端 1 列，平板 2 列，桌面 3 列。
间距使用 g-3（gutter）替代传统的 margin。

课后练习

一、概念自测（选择题 / 填空题）

（单选） Bootstrap 5 的栅格系统基于哪种 CSS 布局模块？
A. Float
B. CSS Grid
C. Flexbox
D. Table
（单选） 类名 .col-lg-6 的含义是？
A. 屏幕宽度 ≥ 992px 时，该列占 6/12 宽度。
B. 屏幕宽度 < 992px 时，该列占 6/12 宽度。
C. 所有屏幕下都占 50% 宽度。
D. 仅在 ≥ 1200px 时占 6/12 宽度。
（填空） 要使一列在平板（≥768px）及以上向右偏移 2 列的空间，应使用类名 ______。
（多选） 以下哪些 Bootstrap 5 类名可以实现响应式显示/隐藏？
A. d-md-none
B. d-lg-block
C. hide-on-mobile
D. d-print-none

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要使用 Bootstrap 5 创建一个产品展示页的响应式栅格布局。要求如下：

页面使用 Bootstrap 5 CDN 引入。
顶部导航栏使用 .navbar，内含品牌名和 3 个导航链接，移动端折叠为汉堡菜单（使用 Bootstrap 的 navbar-toggler）。
主体内容区使用 .container，包含一个 Banner 区域（全宽占一行的图片占位）和三个产品卡片（使用栅格，移动端堆叠，平板 2 列，桌面 3 列）。
产品卡片内包含图片占位符、标题、描述和按钮。
间距使用 Bootstrap 5 的 g-* 或 m-*/p-* 工具类。
代码简洁，注释说明各断点下布局变化。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML 代码。提示词中需明确指定 Bootstrap 版本、栅格类的断点组合、以及导航栏折叠的 Bootstrap 组件结构。

课后练习答案

一、概念自测答案

C
- 解析：Bootstrap 5 栅格基于 Flexbox 构建，row 就是 display: flex; flex-wrap: wrap;。
A
- 解析：lg 断点对应最小宽度 992px，.col-lg-6 表示在 ≥992px 时列宽 50%。
offset-md-2
- 解析：md 断点为 768px，offset-2 表示偏移 2/12 的宽度。
A、B、D
- 解析：d-md-none（≥768px 隐藏）、d-lg-block（≥992px 显示为块）、d-print-none（打印时隐藏）均为 Bootstrap 工具类。C 不是 Bootstrap 类名。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请使用 Bootstrap 5（CDN 引入）生成一个产品展示页。要求：

导航栏使用 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">，包含品牌名 ‘MyShop’ 和三个链接 ‘首页’、’产品’、’关于’。移动端使用 navbar-toggler 折叠菜单。

主体使用 <div class="container my-4">。

Banner 区使用一个占位 <div class="bg-secondary text-white p-5 text-center"> 模拟横幅。

下方三个产品卡片使用栅格：<div class="row g-4">。卡片使用 <div class="col-12 col-sm-6 col-lg-4">。每张卡片包含一张占位图（https://via.placeholder.com/400x250）、标题（h5）、描述文字和一个 ‘查看详情’ 按钮（btn btn-primary）。

适当使用 Bootstrap 5 的内边距/外边距工具类。代码整洁，注释说明响应式断点。直接输出完整 HTML 文件。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/29/Bootstrap-5/

发表日期：July 29th 2026, 1:00:00 am

更新日期：July 28th 2026, 10:27:15 am

Next Post

Bootstrap-5-Common-Components-Navbar-Cards-Modals
Previous Post

CSS-Responsive-Design-and-Media-Queries

CATALOG

1. 第31课：Bootstrap 5 栅格系统与响应式工具