本文详解如何在 bootstrap 中正确实现嵌套网格（nested grid），解决因遗漏父级 `.row` 或列宽计算错误导致的卡片错位、高度不一致等问题，并提供可直接运行的结构化代码示例。
在 Bootstrap 中构建类似「左侧 8 列模块区 + 右侧 4 列日程区」的响应式双栏布局时，关键在于*严格遵循“行（.row）→ 列（`.col-）→ 行（嵌套.row）→ 列”的层级结构**。初学者常犯的错误包括：在列内直接放置新列（缺少嵌套.row）、列宽总和超出 12、未统一卡片尺寸导致视觉参差，或混淆col-3与col-4` 的语义逻辑。
✅ 正确做法如下：
-
外层容器：使用 保证居中与响应式间距；
- 主行布局：
下划分为 col-8（模块区）与 col-4（日程区）；- 嵌套行必须显式声明：每个 .col-* 内若需多列排列，必须包裹一层新的 .row —— Bootstrap 的栅格系统依赖 .row 重置负边距（margin: 0 -15px）并触发 flex 布局，否则子列会继承外层列的 padding，造成错位或宽度溢出；
- 列宽需整除 12：例如在 col-8 区域内展示 3 卡/行，应使用 col-4（3 × 4 = 12），而非 col-3（3 × 3 = 9，剩余 3 列空白，破坏对齐）；同理，col-4 区域内两列并排应使用 col-6（2 × 6 = 12）；
- 保持卡片一致性：为避免高度不一影响网格流，建议为 .card 设置最小高度（如 min-height: 200px）或启用 Bootstrap 5+ 的 h-100 类，配合 d-flex flex-column 确保内容区域拉伸。
以下是修复后的完整、可运行代码（基于 Bootstrap 5.3）：
Bootstrap 嵌套网格示例 Modules
@@##@@Module A
Description here.
@@##@@Module B
Description here.
@@##@@Module C
Description here.
@@##@@Module D
Description here.
@@##@@Module E
Description here.
@@##@@Module F
Description here.
Schedule
@@##@@Event A
9:00–10:30
@@##@@Event B
11:00–12:30
? 注意事项总结：
- ❌ 错误示范：→ 缺少中间 .row，必然错位；…
- ✅ 正确嵌套：；…
- 使用 g-*（如 g-3）替代旧版 mx-n2 手动控制间隙，更简洁可靠；
- 图片建议添加 object-fit: cover 和固定高度，防止拉伸变形；
- 在小屏幕（如手机）下，col-8/col-4 会自动堆叠为 100% 宽度，如需保持并排，请使用响应式断点类（如 col-md-8 col-md-4）。
掌握嵌套网格的核心原则——「有列必有行，有行必归 12」，即可稳定构建任意复杂度的 Bootstrap 布局。
- 主行布局：
