正确写法是将d-flex加在.col的直接子元素上，如<div class="col"><div class="d-flex justify-content-between">…</div></div>；直接给.col加d-flex会因flex-item与flex-container双重角色冲突导致布局异常。
为什么直接给 .col 加 d-flex 会出问题
因为 .col 本身已是 flex item（父级 .row 是 flex 容器），它默认的 flex: 0 0 auto 会压制你后续加的 d-flex 行为——此时你不是在“让 col 成为容器”，而是在一个已被 flex 管理的子元素上强行再启一套 flex 上下文，结果常是内容不换行、对齐失效、甚至高度塌陷。
.col 内部需要 Flex 布局时，正确写法是什么
把 d-flex 类加在 .col 的**直接子元素**上，而不是 .col 自身。这个子元素就是你要布局的内容容器，比如 <div class="card"> 或 <div class="content-wrapper">。
- ✅ 正确：
<div class="col"><div class="d-flex justify-content-between">…</div></div> - ❌ 错误：
<div class="col d-flex">…</div>（除非你明确要覆盖 col 的 flex-item 行为） - 如果需垂直排列且等高，
.col内部容器还要加h-100，否则 flex 高度无基准 - 避免在该内部容器上同时用
margin和gap工具类，gap只对 flex/grid 容器生效，margin会叠加导致间距翻倍
想让多个 .col 在外部 flex 容器里正常换行，怎么办
当 .col 被放进一个非 .row 的自定义 flex 容器（比如 <div class="d-flex">）时，它们默认不会换行，容易横向溢出。
- 给外部容器加
.flex-wrap（即flex-wrap: wrap） - 给每个
.col显式设宽度，如.col-12 .col-md-6，别只靠flex: 1让它自适应——.col的基础样式依赖断点类才能生效 - 不要对
.col直接设width或max-width，改用 Bootstrap 的w-50、mw-100等工具类 - 检查浏览器开发者工具里
flex-basis是否被重置：某些主题或插件会覆盖.col的flex: 0 0 auto
align-items-stretch 在 .row 中为何有时不生效
因为 .row 默认是 flex 容器，但它的 align-items 初始值是 normal，不是 stretch。只有显式加 .align-items-stretch 才能触发等高拉伸。
- 删掉
.col或其子元素上的height: 100%、min-height，它们会干扰 stretch 的自然计算 -
h-100必须作用于.col内部的块级容器（如.card），而非.col本身 - 子级若再嵌套
.row，它不会继承父级的align-items，需单独加类 - IE11 不支持
align-items-stretch，如需兼容，得用 JS 拉高或 fallback 到table-cell
box-sizing: content-box 或未重置的 padding/border 拉偏了高度计算——所有参与 stretch 的层级，都得确保 box-sizing: border-box 生效。 
