本文详解如何在 bootstrap 中正确实现嵌套网格（如左侧 8 列模块区 + 右侧 4 列日程区），解决因缺失父级 `.row`、列宽总和超限或未重置行间距导致的卡片错位、高度不一致等问题。
在 Bootstrap 中构建嵌套网格系统时，核心原则是：每一组 .col-* 必须严格包裹在 .row 内，且同一 .row 下所有列的 col-* 数值之和应为 12（或其倍数，依赖响应式断点）。你原始代码中存在多个关键问题：
- ❌ 缺失闭合标签（如 未闭合， 错位导致 DOM 结构混乱）；
- ❌ 在 .col-8 内部直接嵌套了未包裹在 .row 中的 .col-3 元素（Bootstrap 要求嵌套列必须位于新 .row 内）；
- ❌ 第二行卡片未添加垂直间距（如 mt-2），导致视觉上“挤在一起”，加剧高度不一致的错觉；
- ❌ 列宽设计不合理：col-3 × 4 = 12 是合法的，但你实际写了 3 个 col-3 后又嵌套了一个新 row（无父 .row），造成渲染异常。
✅ 正确做法如下：
- 外层容器：使用 .container → .row 构建主栅格；
- 左右分栏：.col-8（模块区） + .col-4（日程区）；
- 模块区内嵌网格：每个 .col-8 子区域需新增 .row，再分配 .col-4（3 列/行，占满 12）；若需多行，每行独立 .row，并用 mt-2 等间距工具类分隔；
- 日程区内嵌网格：同理，.row + 两个 .col-6 实现等宽双卡。
以下是结构清晰、语义完整、可直接运行的修复版代码：
Modules
@@##@@
Module A
Description
@@##@@
Module B
Description
@@##@@
Module C
Description
@@##@@
Module D
Description
@@##@@
Module E
Description
@@##@@
Module F
Description
Schedule
@@##@@
Event A
Jun 12, 10:00 AM
@@##@@
Event B
Jun 13, 2:30 PM
@@##@@
? 关键优化说明：
- 使用 g-3（gap）替代手动 mt-2，保证列间统一间距；
- 所有卡片添加 h-100 + d-flex flex-column，确保高度一致、内容垂直对齐；
- 图片统一设置 style="height: ...; object-fit: cover;" 防止拉伸变形；
- 每个 .row 内列宽总和严格为 12（如 col-4 × 3 或 col-12 × 2），避免 Bootstrap 自动换行或溢出；
- 移除冗余、未闭合的 HTML 标签，保障 DOM 清晰可靠。
? 小贴士：Bootstrap 5+ 不再默认为 .row 设置负边距（需配合 g-* 类控制间隙），因此务必使用 g-* 替代旧式 mx-n* + px-n* 组合，提升可维护性。
通过以上结构化嵌套，即可精准复现目标布局，并具备良好的响应式扩展能力（如在小屏下自动堆叠为单列）。
