本文详解 Bootstrap 嵌套网格的规范用法，指出常见错误（如遗漏外层 row、col 划分不均、未闭合标签），并通过结构化代码演示如何构建左右分栏布局——左侧 3 列 × 2 行模块卡片，右侧双列课程表卡片，并强调响应式对齐与间距控制要点。
在 Bootstrap 中实现嵌套网格（Nested Grid）的关键在于严格遵守「row → col → row → col」的层级结构。许多开发者失败的根本原因，是误以为
内可直接放置内容或新列，而忽略了：所有列（.col-*）必须包裹在 .row 容器中，且每个 .row 必须位于 .container 或另一个 .col-* 内。你的原始代码存在多个结构性问题：
- 缺失关键闭合标签（如 多处遗漏，导致 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 下，破坏了整体栅格对齐。
✅ 正确做法如下：
- 外层容器统一用 .row：确保左右两栏（.col-8 和 .col-4）处于同一 .row 下，共占满 12 栅格；
- 每列内部需新建 .row：在 .col-8 和 .col-4 内部分别添加独立 .row，作为嵌套起点；
- 子列宽度需整除 12：例如左侧每行放 3 张卡片 → 使用 col-4；右侧每行放 2 张 → 使用 col-6；
- 添加间距增强可读性：用 mt-2（margin-top: 0.5rem）、mb-3 等实用类控制卡片间距。
以下是修复后的完整结构（已验证兼容 Bootstrap 5+）：
Modules
Module A
Description
Module B
Description
Module C
Description
Module D
Description
Module E
Description
Module F
Description
Schedule
Class A
Mon, 9:00–10:30
Class B
Tue, 14:00–15:30
? 关键注意事项：
- ✅ 始终检查 HTML 标签闭合（尤其 层级）；
- ✅ 使用 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 的栅格本质是「约束下的自由组合」——只要层级清晰、语义准确，复杂布局亦可一气呵成。
