本文详解如何在 bootstrap 中正确实现嵌套网格（nested grid），解决因未遵循“row → col → row → col”层级规范导致的卡片错位、宽度不均等问题，并提供可运行的结构化代码示例。
在 Bootstrap 中构建嵌套网格系统时，一个常见误区是忽略其严格的容器嵌套规则：所有列（.col-*）必须直接置于 .row 内，而 .row 又必须置于 .container 或另一个 .col-* 中。若在列内部直接放置新列（如
）而未包裹在 .row 中，Bootstrap 的 flex 布局将失效，导致列宽计算错误、换行异常、高度不一致等问题——这正是提问者第二行卡片长度不统一的根本原因。
✅ 正确嵌套结构原则
- 外层容器：.container → .row（主行）
- 主行内分栏：.col-8（左侧模块区） + .col-4（右侧日程区）
- 每个 .col-* 内部如需多列布局，必须先添加 .row，再在其下放置子 .col-*
- 列宽总和应为 12（如 col-4 + col-4 + col-4 = 12；col-6 + col-6 = 12），确保单行内自动水平排列
? 完整可运行示例（Bootstrap 5+）
Bootstrap 嵌套网格示例 Modules
@@##@@模块一
描述文字
@@##@@模块二
描述文字
@@##@@模块三
描述文字
@@##@@模块四
描述文字
@@##@@模块五
描述文字
@@##@@模块六
描述文字
Schedule
@@##@@日程一
9:00–10:30
@@##@@日程二
11:00–12:30
⚠️ 关键注意事项
- *禁止跳过 .row 直接嵌套 `.col-`**：这是最常导致布局崩溃的原因；
- 使用 g-3（gap）替代手动 mt-2：语义更清晰，响应式更可靠；
- 统一卡片高度：添加 h-100 类 + d-flex flex-column，使卡片内容区域自适应并底部对齐；
- 图片适配：通过 style="height: ...; object-fit: cover;" 防止拉伸变形；
- 移动端友好：Bootstrap 默认响应式断点（如 col-8 在所有屏幕生效），如需响应式调整，改用 col-md-8、col-lg-6 等。
✅ 总结
Bootstrap 的嵌套网格不是“任意嵌套”，而是有明确的 DOM 层级契约：.row 是列的唯一合法父容器。只要严格遵守「外层 row → 子列 → 子列内新建 row → 新 row 下置子列」这一模式，即可稳定构建任意复杂度的响应式网格布局。调试时建议使用浏览器开发者工具检查元素是否被正确包裹在 .row 中——这是快速定位嵌套失效问题的黄金法则。
