直接在.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 都在重置布局上下文。漏掉一个，整个嵌套就脱离栅格约束。
