Bootstrap框架中栅格嵌套的正确方法

直接在.col-里放子.col-会错位，因为Bootstrap栅格依赖.row的flex布局和负外边距抵消内边距，跳过.row导致宽度计算错误、换行混乱、高度不齐、右侧溢出。

为什么直接在 .col-* 里放子 .col-* 会错位？

因为 Bootstrap 的栅格系统不是靠“列宽相加”自动对齐的，而是靠 .row 的 flex 布局 + 负外边距（margin: 0 -15px）来抵消列内边距（padding: 0 15px）。跳过 .row，子列就没了 flex 容器，也没法重置 padding 抵消逻辑，结果就是：宽度算不准、换行乱、高度不齐、右侧溢出。

• 常见错误现象：.col-8 里直接写三个 .col-4，第二行卡片突然变短或错位
• 根本原因：子列没包裹在 .row 中，继承了外层 .col-8 的 padding，又没被 .row 的负 margin 补偿
• 验证方式：浏览器检查元素，看子 .col-* 是否有意外的左右 15px 内边距撑开

.row 必须显式写出来，不能省

嵌套时，每个 .col-* 内部若要再分多列，第一件事就是加一层 .row——它不是可选装饰，是功能必需。

• 正确结构：.container > .row > .col-8 > .row > .col-4 .col-4 .col-4
• 别用响应式混搭陷阱：比如在 .col-8 里用 .col-sm-6，但父容器没设 .row，sm 断点下依然失效
• 注意兼容性：Bootstrap 5+ 默认启用 flex，但若项目降级到 4.x 或禁用了 flex，.row 的 display: flex 仍需确保开启，否则回退到 float 布局易出问题

子列总宽必须等于 12，不是“看着差不多”

很多人以为 .col-4 就是“三分之一”，其实它是“占 4/12 栅格”，整行所有子列加起来必须严格为 12，否则 Bootstrap 不会帮你换行或拉伸，而是强行挤在同一行或塌缩。

• 左侧模块区每行 3 卡 → 用 .col-4（3 × 4 = 12），不是 .col-3（3 × 3 = 9，留白 3 列，破坏对齐）
• 右侧日程区每行 2 卡 → 用 .col-6（2 × 6 = 12），不是 .col-5（2 × 5 = 10，右边空两列，卡片间距不均）
• 如果内容动态增减，建议用 flex-wrap: wrap 配合 min-width 控制，别依赖栅格自动换行

卡片高度不一致导致网格“断层”，怎么稳住？

嵌套后卡片高度不同，会让下一行整体上浮（flex 默认 align-items: stretch 失效），视觉上像网格塌了一角。

• 最简方案：给卡片加 h-100 + d-flex flex-column，再让内容区 flex-grow-1 拉伸
• 更稳妥做法：统一设 min-height: 200px（数值按业务定），避免文字多少影响布局流
• 别依赖 card-deck：该类在 Bootstrap 5.3+ 已废弃，且不解决嵌套内的高度同步问题

嵌套本身不难，难的是记住：每一层 .row 都在重置布局上下文。漏掉一个，整个嵌套就脱离栅格约束。