加 d-flex 没效果主因是父容器高度缺失、子项脱离文档流（如 position: absolute）或响应式断点未匹配；.row 默认已是 flex，无需重复加 d-flex，应加在 .col-* 或目标容器上并配 h-100 锚定高度。
直接用 d-flex 类就能启用 Flex 布局，不需要额外写 CSS 或改 HTML 结构——但多数人卡在“加了没反应”，核心问题不是类没加对，而是父容器高度缺失、子项干扰或断点覆盖失效。
为什么加了 d-flex 却没效果
常见错误是只给最外层容器加 d-flex，但内部子元素仍按块级流渲染，或父容器没有明确高度导致 align-items: stretch 失效。
-
.row在 Bootstrap 5 中默认已是display: flex，再加d-flex不报错但无意义；真要干预布局，应加在.col-*或自定义容器上 - 如果目标容器没设高度（比如空的
div），align-items: center或justify-content: center看不出效果——必须有可参照的尺寸上下文 - 子元素含
position: absolute、float或未设img-fluid的图片，会脱离 Flex 流，导致对齐/等高失效 - 响应式类如
d-md-flex在小屏下自动退化为display: block，若忘了配d-sm-flex，手机端就回退到原始流布局
d-flex 和 d-inline-flex 怎么选
关键看容器是否需要参与文本流排版：行内场景（如按钮组、标签云）用 d-inline-flex，块级区域（卡片、表单区）用 d-flex。
-
d-flex生成块级容器，独占一行，适合布局主区块 -
d-inline-flex行内表现，宽度由内容撑开，适合嵌入段落中控制多个图标或按钮的对齐 - 两者都支持响应式变体：
d-sm-flex、d-lg-inline-flex等，但注意断点前缀必须紧贴d-，写成sm-d-flex无效 - 若需让
d-inline-flex内部子项换行，得额外加flex-wrap类，它本身不提供换行能力
等高列为什么总失败
不是 .row 没 flex，而是 .col-* 缺少拉伸锚点——align-items: stretch 需要父容器有明确高度约束才能生效。
- 最稳解法：给
.col-*加d-flex+h-100，再给子元素（如.card）也加h-100，形成高度继承链 - 避免在
.col-*上写死min-height或height，会覆盖flex: 0 1 auto，阻止拉伸 - 图片必须加
img-fluid，否则宽高溢出破坏列高度一致性 - 移动端多列换行后，每组等高单元必须独立包裹在各自的
.row内，跨.row的等高无法保证
真正难的不是加类，而是判断哪一层该加、哪一层该留空——Flex 行为依赖完整的高度上下文和干净的子项流，漏掉一个 h-100 或多写一个 position: relative，整个对齐逻辑就断了。
