English 中文 العربية 日本語 Português

Bootstrap: Grid 网格系统

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Alice 上节课用 Flexbox 做了导航栏，现在她想做主页的主体布局——左侧边栏（3 列）+ 右侧内容区（9 列）——用传统 CSS 布局实现复杂的响应式多列结构非常麻烦。

(4) 解法

使用 Bootstrap 网格系统只需 <div class="row"><div class="col-3">Sidebar</div><div class="col-9">Content</div></div>。网格是 Bootstrap 最核心的布局工具，基于 12 列 Flexbox 网格，让你用 row + col-* 就能搭建出任意复杂度的页面布局。

理解方式： 网格就像 Excel 表格——一行为 row，被均分成 12 等份。col-4 占 4 份，col-8 占 8 份，加起来刚好 12。

(5) 收益

使用网格系统后，Alice 只用几行标签就完成了左 3 列右 9 列的经典博客布局，并且配合断点后缀轻松实现响应式适配。

2. 基本结构

网格始终是 容器 -> 行 -> 列的嵌套：

HTML 
<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：网格基本布局

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Basics</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-col { background: #0d6efd; color: #fff; padding: 1rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="row mb-3">
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
    </div>
    <div class="row mb-3">
      <div class="col-4 demo-col" style="background: #198754;">col-4</div>
      <div class="col-8 demo-col" style="background: #dc3545;">col-8</div>
    </div>
    <div class="row">
      <div class="col-3 demo-col" style="background: #6f42c1;">col-3</div>
      <div class="col demo-col" style="background: #fd7e14;">col (auto)</div>
      <div class="col-3 demo-col" style="background: #20c997;">col-3</div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 列的行为对比

class 行为 场景
col 均分剩余空间 等分列
col-{n} 固定占据 n/12 宽度 固定比例布局
col-auto 根据内容自适应宽度 按钮组、标签
col-{breakpoint} 断点及以下全宽，以上按比例 响应式布局

3. 响应式列

HTML 
<div class="row">
  <div class="col-12 col-md-6 col-lg-4 bg-primary p-3 text-white">Sidebar</div>
  <div class="col-12 col-md-6 col-lg-8 bg-info p-3 text-white">Content</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

写法 < 768px 768-991px >= 992px
col-12 col-md-6 col-lg-4 全宽 1/2 宽 1/3 宽
col-6 col-md-4 col-xl-3 1/2 宽 1/3 宽 1/4 宽
col-md-8 全宽 2/3 宽 2/3 宽

4. 多行与行包装

当一行中列数总和超过 12 时，多余的列自动换到下一行：

HTML 
<div class="row">
  <div class="col-4 bg-primary p-3 text-white">4</div>
  <div class="col-4 bg-success p-3 text-white">4</div>
  <div class="col-4 bg-danger p-3 text-white">4</div>
  <div class="col-4 bg-warning p-3">4 (wraps to next row)</div>
  <div class="col-4 bg-info p-3 text-white">4</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

5. 偏移：offset

HTML 
<div class="row">
  <div class="col-3 bg-primary p-3 text-white">Sidebar</div>
  <div class="col-6 offset-3 bg-info p-3 text-white">Offset 3 columns right</div>
</div>

<div class="row">
  <div class="col-6 offset-3 bg-success p-3 text-white text-center">
    Centered column (col-6 + offset-3)
  </div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

写法 效果
col-6 offset-3 6 列居中
col-4 offset-4 4 列居中
col-8 offset-2 8 列偏左

6. 嵌套

在列内部再套一组 row + col：

HTML 
<div class="row">
  <div class="col-8 bg-light p-3">
    <h6>Main Section</h6>
    <div class="row">
      <div class="col-6 bg-primary text-white p-2">Nested 6</div>
      <div class="col-6 bg-success text-white p-2">Nested 6</div>
    </div>
  </div>
  <div class="col-4 bg-info p-3 text-white">Sidebar</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 嵌套网格的列总和也是 12，但相对于父列（而不是容器）计算。

7. 沟槽：gutter

HTML 
<div class="row g-0">
  <div class="col-6"><div class="bg-primary text-white p-3">g-0: no gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-0: no gap</div></div>
</div>

<div class="row g-4 mt-2">
  <div class="col-6"><div class="bg-primary text-white p-3">g-4: 24px gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-4: 24px gap</div></div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 水平 垂直
g-0 0 0
g-3 1rem 1rem
g-5 3rem 3rem
gx-4 1.5rem 0
gy-4 0 1.5rem

8. Grid 架构与参考

(1) 网格系统架构

100% 
graph TB
    subgraph 容器层
        A[.container / .container-fluid] --> B[最大宽度 + 水平内边距]
    end
    subgraph 行层
        B --> C[.row]
        C --> D[负 margin 抵消容器 padding]
        C --> E[gutter 间隙控制]
    end
    subgraph 列层
        D --> F[.col-*]
        E --> F
        F --> G[12 列弹性系统]
        F --> H[响应式断点 col-md-*]
        F --> I[偏移 offset-*]
        F --> J[排序 order-*]
    end
    subgraph 子内容
        G --> K[嵌套网格 row > col]
        H --> K
        I --> K
    end

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(2) Grid 层级参考

层级 元素 class 宽度 说明
容器 <div> container 响应式固定宽度 居中、限制最大宽度
容器 <div> container-fluid 100% 全宽
容器 <div> `container-{sm md lg
行 <div> row 100% + 负 margin Flex 容器
列 <div> col 均分 自动伸缩
列 <div> col-{n} n/12 固定比例
列 <div> col-{bp}-{n} 响应式 断点以上按比例

(3) 网格断点列参考

类名 <576px >=576px >=768px >=992px >=1200px >=1400px
col-12 100% 100% 100% 100% 100% 100%
col-sm-6 100% 50% 50% 50% 50% 50%
col-md-4 100% 100% 33.3% 33.3% 33.3% 33.3%
col-lg-3 100% 100% 100% 25% 25% 25%
col-xl-2 100% 100% 100% 100% 16.67% 16.67%
col-12 col-md-6 col-lg-4 100% 100% 50% 33.3% 33.3% 33.3%
col-6 col-md-4 col-xl-3 50% 50% 33.3% 33.3% 25% 25%

▶ 示例：博客页面布局

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Layout</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <header class="mb-4">
      <h1>我的博客</h1>
      <p class="text-muted">分享技术与思考</p>
    </header>

    <div class="row g-4">
      <!-- Main content -->
      <article class="col-12 col-lg-8">
        <div class="card mb-3">
          <div class="card-body">
            <h2 class="card-title h4">Grid 布局实战</h2>
            <p class="card-text text-muted small">2026 年 1 月 20 日</p>
            <p>使用 col-8 + col-4 实现经典博客布局，左侧文章区、右侧侧栏。</p>
            <button class="btn btn-sm btn-primary">阅读全文</button>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h2 class="card-title h4">Bootstrap 5 新特性</h2>
            <p class="card-text text-muted small">2026 年 1 月 18 日</p>
            <p>Bootstrap 5 引入了 CSS 变量、改进的网格系统和新的工具类。</p>
            <button class="btn btn-sm btn-primary">阅读全文</button>
          </div>
        </div>
      </article>

      <!-- Sidebar -->
      <aside class="col-12 col-lg-4">
        <div class="bg-light p-4 rounded">
          <h5>关于作者</h5>
          <p class="small mb-0">全栈开发者，热爱前端技术和 UI 设计。</p>
        </div>
        <div class="bg-light p-4 rounded mt-3">
          <h5>分类</h5>
          <ul class="list-unstyled small mb-0">
            <li>前端 (12)</li>
            <li>后端 (8)</li>
            <li>设计 (5)</li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：仪表盘网格

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid py-4 bg-light" style="min-height: 100vh;">
    <h3 class="mb-4">仪表盘</h3>

    <!-- Stats row -->
    <div class="row g-3 mb-4">
      <div class="col-6 col-xl-3">
        <div class="bg-primary text-white p-3 rounded">
          <h6 class="mb-1">用户数</h6>
          <h3 class="mb-0">1,284</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-success text-white p-3 rounded">
          <h6 class="mb-1">订单</h6>
          <h3 class="mb-0">356</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-warning text-dark p-3 rounded">
          <h6 class="mb-1">收入</h6>
          <h3 class="mb-0">$12,450</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-info text-white p-3 rounded">
          <h6 class="mb-1">活跃度</h6>
          <h3 class="mb-0">78%</h3>
        </div>
      </div>
    </div>

    <!-- Charts + Table -->
    <div class="row g-3">
      <div class="col-12 col-lg-8">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>图表区域</h5>
          <div class="bg-light" style="height: 200px;"></div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>最近活动</h5>
          <ul class="list-unstyled small mb-0">
            <li class="mb-2">张三 注册了新账号</li>
            <li class="mb-2">李四 提交了订单</li>
            <li>王五 更新了资料</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：嵌套网格

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; border: 2px dashed #0d6efd; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 0.75rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">嵌套网格演示</h3>

    <div class="row">
      <div class="col-8">
        <div class="outer">
          <h6>主列 col-8</h6>
          <div class="row g-2">
            <div class="col-6"><div class="inner">嵌套 col-6</div></div>
            <div class="col-6"><div class="inner">嵌套 col-6</div></div>
            <div class="col-4"><div class="inner">嵌套 col-4</div></div>
            <div class="col-4"><div class="inner">嵌套 col-4</div></div>
            <div class="col-4"><div class="inner">嵌套 col-4</div></div>
          </div>
          <p class="small mt-2 mb-0">嵌套网格的 12 列相对于父列计算</p>
        </div>
      </div>
      <div class="col-4">
        <div class="outer" style="height: 100%;">
          <h6>侧栏 col-4</h6>
          <p class="small mb-0">侧栏高度与主列内容自动对齐</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：响应式商品网格

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">商品列表</h3>

    <div class="row g-3 g-lg-4">
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=商品1" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名称</h6>
            <p class="card-text text-danger fw-bold mb-0">¥99.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/198754/fff?text=商品2" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名称</h6>
            <p class="card-text text-danger fw-bold mb-0">¥149.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/dc3545/fff?text=商品3" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名称</h6>
            <p class="card-text text-danger fw-bold mb-0">¥199.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/ffc107/000?text=商品4" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">商品名称</h6>
            <p class="card-text text-danger fw-bold mb-0">¥59.00</p>
          </div>
        </div>
      </div>
    </div>

    <p class="text-muted small mt-3">
      响应式：手机 2 列 (col-6) → 平板 3 列 (col-md-4) → 桌面 4 列 (col-lg-3)，间距 g-3 → g-lg-4
    </p>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

❓ 常见问题

Q 一行中列数总和不到 12 会怎样？
A 右边的空间留空。例如 col-4 + col-4 占 8/12，后面空 4/12。如果需要把剩余空间填满，用 col（自动伸缩）。
Q 网格的 gutter 和间距工具类 gap-* 有什么区别？
A g-*（gutter）是网格专用的，作用于 row 上控制每列之间的间隙。gap-* 是通用 flex/grid 工具类，在网格布局中推荐 g-*。
Q 为什么我的网格列没有在同一行？
A 最常见原因：(1) 列没有放在 row 内；(2) row 没有放在容器（container/container-fluid）内；(3) 列宽总和超过 12 导致换行。
Q col 和 col-12 一样吗？
A 视觉上一样（都是 100% 宽度），但行为不同。col 按 flex: 1 0 0% 计算，会和其他 col 均分行内空间。col-12 是固定 width: 100%。
Q 网格中如何实现垂直对齐？
A 网格列也是 Flexbox 子项，所以可以直接使用 align-items-* 和 align-self-* 工具类。在 row 上加 align-items-center 可使行内所有列垂直居中，在单独 col 上加 align-self-end 可使该列底部对齐。

📖 小节

📝 作业

  1. ⭐ 创建一个标准博客布局：手机端全宽显示，桌面端左侧 col-8 文章区 + 右侧 col-4 侧栏。
  2. ⭐⭐ 用网格实现一个四列卡片网格：手机端 1 列（col-12）、平板 2 列（col-md-6）、桌面 4 列（col-lg-3），卡片间 g-4。
  3. ⭐⭐⭐ 创建一个不对称布局：侧栏 col-3 + 内容区 col-6 + 右侧小工具 col-3。

上一课： 响应式设计 · 下一课： 导航栏

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏