本文详解 bootstrap 中嵌套栅格的规范用法，指出常见错误（如遗漏外层 `.row`、列宽总和超 12、未重置行间距），并通过结构化代码演示如何实现左侧 8 列模块区（每行 3 张等宽卡片）、右侧 4 列日程区（每行 2 张卡片）的响应式布局。
在 Bootstrap 中构建嵌套栅格系统时，*必须严格遵守“行（.row）→ 列（`.col-）→ 行（.row`）→ 列”的层级结构**。初学者常犯的核心错误包括：
- 在 .col-* 内直接嵌套 .col-*（跳过中间 .row）；
- 子 .row 的子列总宽度超过 12（如使用多个 col-3 但未考虑换行逻辑）；
- 忽略 .row 默认的负边距（margin: 0 -15px），导致内嵌内容溢出或错位；
- 未为多行卡片添加垂直间距（如 mt-2），造成视觉粘连。
以下是一个符合规范、可直接运行的完整示例（基于 Bootstrap 5+）：
Bootstrap 嵌套栅格布局 Modules
@@##@@模块一
描述信息
@@##@@模块二
描述信息
@@##@@模块三
描述信息
@@##@@模块四
描述信息
@@##@@模块五
描述信息
@@##@@模块六
描述信息
Schedule
@@##@@日程一
时间：9:00–10:30
@@##@@日程二
时间：11:00–12:30
@@##@@日程三
时间：14:00–15:30
@@##@@日程四
时间：16:00–17:30
✅ 关键要点总结：
- *每一级 `.col-必须包裹在.row` 内** —— 这是 Bootstrap 栅格系统的强制约束，否则负边距失效，列宽计算异常；
- *使用 `g-类（如g-3）统一控制网格间距**，替代零散的mt-2/mb-2`，提升可维护性；
- 为卡片添加 h-100 并配合 d-flex flex-column，确保多张卡片高度一致，避免参差不齐；
- 图片建议设置 object-fit: cover 和固定高度，防止因原始尺寸差异破坏布局；
- 移动端适配提示：若需在小屏下改为单列堆叠，可将 col-8 / col-4 替换为 col-md-8 / col-md-4，并在 sm 断点自动回退为 col-12。
遵循以上结构与实践，即可稳定实现清晰、响应、易扩展的嵌套栅格布局。
