嵌套前必须加 .row，否则子 .col-* 退化为普通块级元素；.row 提供 flex 布局与内外边距抵消；子列断点值总和须≤12，超则换行；高度不齐时需每张卡片加 d-flex flex-column h-100 并设内容区 flex-grow-1；三层以上嵌套优先用 CSS Grid 替代。
嵌套前必须加 .row
不加 .row，子 .col-* 会退化成普通块级元素：宽度撑满、左右边距错乱、flex 布局失效。Bootstrap 的栅格逻辑只对 .row 的直接子元素生效，跳过它就等于让 flex “看不见”这些列。
错误写法：
<div class="col-8"> <br><div class="col-4">A</div> <br><div class="col-4">B</div> <br> </div>
正确写法：
<div class="col-8"> <br><div class="row"> <br><div class="col-4">A</div> <br><div class="col-4">B</div> <br> </div> <br> </div>
.row 提供 display: flex 和 margin: 0 -15px，用来抵消子列的 padding: 0 15px；用 Chrome DevTools 检查该 .row 的 computed 样式，确认这两项已生效。
子列总宽必须等于 12
Bootstrap 不做加法校验，只按数值算 flex-basis。同一 .row 下所有 .col-* 的断点数值加起来超过 12，超出部分会整行掉到下一行——不是缩放，是视觉断裂。
-
.col-8 .col-4（=12）：正常并排 -
.col-5 .col-5 .col-3（=13）：第三项一定换行 - 动态列数不确定时，改用
row-cols-3类，交由 CSS Grid 自动均分更可靠 - 断点类要独立声明：子
.row里的.col-md-6在手机上默认回退为.col-12，不能指望它继承父级断点
高度不齐时别只靠 d-flex
光给外层 .row 加 d-flex 没用。因为 align-items: stretch 只拉伸直接子项（即每个 .col-*），但如果卡片内部标题行数不同、内容长度不一，子项自身高度就不一致，外层拉伸毫无作用。
- 每张卡片外层加
class="d-flex flex-column h-100" - 卡片内容区（如
.card-body）加flex-grow-1，让文字区域撑满剩余空间 -
h-100单独不生效：父级.col-*必须有明确高度上下文，通常需配合.row的h-100或容器设高
三层以上嵌套优先用 CSS Grid 替代
从 .container → .row → .col-* → .row → .col-* → .row，DOM 层级变深、class 语义弱化、调试路径拉长，稍不注意就心算错占比。尤其当嵌套达三层（比如模块页中再套仪表盘+列表+筛选栏），建议评估是否用 display: grid 替代。
Bootstrap 5.3 已支持实验性 CSS Grid 布局系统，可通过 Sass 变量 $enable-cssgrid 启用，使用 .grid、.g-col-* 等类名；或直接用辅助类 .d-grid 触发原生 grid，适合精确控制行列、跨格、二维布局场景——它跳过 .row/.col 那套嵌套规则，也避免了 flex 嵌套带来的高度和断点失控问题。
