嵌套前必须加 .row，否则列会退化成块级元素；子列总宽必须等于12，超了就硬换行；高度不齐需用 d-flex flex-column h-100 和 flex-grow-1 解决；三层以上嵌套优先用 CSS Grid 替代。
嵌套前必须加 .row，否则列会退化成块级元素
bootstrap 的栅格逻辑只对 .row 的直接子元素生效。跳过 .row 直接把 .col-4 塞进 .col-8，等于让 flex 布局“看不见”它——.col-4 会变成普通 <div>，独占一行、宽度撑满父容器、左右边距错乱。
- 错误写法：
<div class="col-8"><div class="col-4">A</div><div class="col-4">B</div></div> - 正确写法：
<div class="col-8"><div class="row"><div class="col-4">A</div><div class="col-4">B</div></div></div> -
.row提供display: flex和margin: 0 -15px，用来抵消子.col-*的padding: 0 15px；缺了它，内容就会向右溢出或贴左边缘 - 用 Chrome DevTools 检查该
.row的 computed 样式，确认display: flex和margin-left: -15px已生效
子列总宽必须等于 12，超了就硬换行
Bootstrap 不做加法校验，只按数字算 flex-basis。同一 .row 下所有 .col-* 的数值加起来超过 12，超出部分会整行掉到下一行，不是缩放，是视觉断裂。
- 比如
.col-8里想放三张卡片：用.col-4× 3（=12），没问题；但用.col-5+.col-5+.col-3（=13），第三张一定掉下去 - 动态列数不确定时，改用
row-cols-3类，交由 CSS Grid 自动均分，比手算.col-*更可靠 - 断点类要独立声明：子
.row里的.col-md-6在手机上默认回退为.col-12，不能指望它自动继承父级断点
嵌套后卡片高度不齐，光加 d-flex 不够
align-items: stretch 只拉伸 .row 的直接子项（即每个 .col-*），但如果卡片内部标题行数不同、内容长度不一，子项自身高度就不一致，外层拉伸毫无作用。
- 给每张卡片外层加
class="d-flex flex-column h-100" - 卡片内容区（如
.card-body）加flex-grow-1，让文字区域撑满剩余空间 - 避免只在外层
.row加d-flex—— 它解决不了子项内部结构差异带来的高度问题 - 别依赖
h-100单独生效：父级.col-*必须有明确高度上下文，通常需配合.row的h-100或容器设高
三层以上嵌套容易失控，优先考虑 CSS Grid 替代
从 .container → .row → .col-* → .row → .col-* → .row，DOM 层级变深、class 语义弱化、调试路径拉长，稍不注意就心算错占比。
- 当嵌套达三层（如模块页中再套仪表盘+列表+筛选栏），评估是否用
display: grid替代部分.row/.col-*结构 - 保留语义化标签（如
<section>、<aside>），用自定义 grid-template-areas 控制布局，比堆.col-lg-3更直观 - 删掉所有仅用于微调的
mt-1、pl-3类，改用g-3或py-4等内置间距工具，避免多层 margin collapse 冲突 - 调试时不靠肉眼估宽度，直接看 DevTools 的
flex-basis和computed width值
.row 是开关，sum = 12 是契约，而高度一致性从来不是栅格系统自带的福利，得靠手动补足 flex 层级。 
