如何在 Bootstrap 中正确实现嵌套网格系统（Nested Grid）

本文详解 Bootstrap 嵌套网格的规范用法，指出常见错误（如遗漏外层 row、col 划分不均、未闭合标签），并通过结构化代码演示如何构建左右分栏布局——左侧 3 列 × 2 行模块卡片，右侧双列课程表卡片，并强调响应式对齐与间距控制要点。

在 Bootstrap 中实现嵌套网格（Nested Grid）的关键在于严格遵守「row → col → row → col」的层级结构。许多开发者失败的根本原因，是误以为 <div class="col-*> 内可直接放置内容或新列，而忽略了：所有列（.col-*）必须包裹在 .row 容器中，且每个 .row 必须位于 .container 或另一个 .col-* 内。

你的原始代码存在多个结构性问题：

• 缺失关键闭合标签（如 </div> 多处遗漏，导致 DOM 树错乱）；
• 在 .col-8 内部未用 .row 包裹子列，导致 Bootstrap 的 flex 布局失效；
• 混淆了列宽语义：col-3 表示占满 12 栅格中的 3 份（即 25%），但 3 × col-3 = 9/12，剩余 3 栅格空白；若需等宽三列，应统一使用 col-4（4×3=12）；
• 第二组卡片缺少 mt-2 等垂直间距类，造成视觉粘连；
• .col-4 右侧区域未与左侧 .col-8 同级置于同一外层 .row 下，破坏了整体栅格对齐。

✅ 正确做法如下：

意兔-AI漫画相机

照片变漫画手绘，做周边好物

下载

1. 外层容器统一用 .row：确保左右两栏（.col-8 和 .col-4）处于同一 .row 下，共占满 12 栅格；
2. 每列内部需新建 .row：在 .col-8 和 .col-4 内部分别添加独立 .row，作为嵌套起点；
3. 子列宽度需整除 12：例如左侧每行放 3 张卡片 → 使用 col-4；右侧每行放 2 张 → 使用 col-6；
4. 添加间距增强可读性：用 mt-2（margin-top: 0.5rem）、mb-3 等实用类控制卡片间距。

以下是修复后的完整结构（已验证兼容 Bootstrap 5+）：

<div class="container mt-4">
  <div class="row">
    <!-- 左侧：8/12 宽度 —— 模块区 -->
    <div class="col-8">
      <h3>Modules</h3>
      <div class="module-container">
        <div class="row g-3"> <!-- g-3 提供列间间隙 -->
          <!-- 第一行：3 张卡片 -->
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 1" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h6 class="card-title mb-2">Module A</h6>
                <p class="card-text text-muted small mb-0">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 2" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h6 class="card-title mb-2">Module B</h6>
                <p class="card-text text-muted small mb-0">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 3" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h6 class="card-title mb-2">Module C</h6>
                <p class="card-text text-muted small mb-0">Description</p>
              </div>
            </div>
          </div>
          <!-- 第二行：3 张卡片（加 mt-3 避免紧贴上一行）-->
          <div class="col-4 mt-3">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 4" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h6 class="card-title mb-2">Module D</h6>
                <p class="card-text text-muted small mb-0">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4 mt-3">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 5" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h6 class="card-title mb-2">Module E</h6>
                <p class="card-text text-muted small mb-0">Description</p>
              </div>
            </div>
          </div>
          <div class="col-4 mt-3">
            <div class="card h-100">
              <img src="/images/pat.jpg" class="card-img-top" alt="Module 6" style="height: 120px; object-fit: cover;">
              <div class="card-body d-flex flex-column">
                <h6 class="card-title mb-2">Module F</h6>
                <p class="card-text text-muted small mb-0">Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧：4/12 宽度 —— 日程区 -->
    <div class="col-4">
      <h3>Schedule</h3>
      <div class="row g-3">
        <div class="col-6">
          <div class="card h-100">
            <img src="/images/star.jpg" class="card-img-top" alt="Class 1" style="height: 100px; object-fit: cover;">
            <div class="card-body d-flex flex-column">
              <h6 class="card-title mb-2">Class A</h6>
              <small class="text-muted">Mon, 9:00–10:30</small>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="card h-100">
            <img src="/images/star.jpg" class="card-img-top" alt="Class 2" style="height: 100px; object-fit: cover;">
            <div class="card-body d-flex flex-column">
              <h6 class="card-title mb-2">Class B</h6>
              <small class="text-muted">Tue, 14:00–15:30</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

? 关键注意事项：

• ✅ 始终检查 HTML 标签闭合（尤其 <div> 层级）；
• ✅ 使用 g-* 类（如 g-3）替代手动 mt-* 控制列间距，更符合 Bootstrap 5+ 推荐范式；
• ✅ 为卡片添加 h-100 确保等高（需父容器设 d-flex flex-column 或 h-100）；
• ✅ 图片建议统一设置 style="object-fit: cover;" 防止拉伸变形；
• ⚠️ 不要在 .row 外直接写 .col-*，否则脱离 flex 上下文，宽度计算失效。

掌握这一嵌套逻辑后，你可自由扩展：例如在 Schedule 区再嵌套 .row > .col-12 > .list-group，或为 Modules 添加响应式断点（col-md-4 col-lg-3）。Bootstrap 的栅格本质是「约束下的自由组合」——只要层级清晰、语义准确，复杂布局亦可一气呵成。