bootstrap 5 中 d-inline-flex 类根本不存在，是框架主动移除而非写法错误；必须手动添加 .d-inline-flex { display: inline-flex !important; } 及响应式变体。
Bootstrap 5 不再支持旧版弹性写法，不是因为“写法错了”，而是这些类名已被框架主动移除——底层逻辑变了，CSS 规则压根没生成，浏览器自然找不到对应样式。
为什么 d-inline-flex 完全不生效
Bootstrap 5 官方 CSS 中根本不存在 d-inline-flex 这个类。它只提供 d-flex、d-inline、d-none 等基础显示类，所有带 -flex 后缀的内联变体（如 d-inline-flex、d-inline-grid）均未内置。
- 常见错误现象：复制了 v4 文档或第三方教程里的
d-inline-flex，加在元素上毫无反应，检查 HTML 结构、CDN 版本、拼写都没问题——就是没定义 - 真实原因：这不是 bug，是设计取舍。Bootstrap 团队认为内联 flex 容器属于“需按项目定制”的场景，不纳入默认工具集
- 必须手动补全：在自定义 CSS 中添加
.d-inline-flex { display: inline-flex !important; }，且响应式变体（如d-inline-flex-md）要按断点规则逐个写 - 别用
d-inline d-flex组合：CSS 中display: inline和display: flex冲突，后者会直接覆盖前者，结果仍是块级 flex
offset-* 类消失后，为什么 ms-auto 不总能替代
offset-sm-3 被移除，是因为它的实现逻辑和语义已过时：它靠计算百分比 margin 模拟“空列”，但现代布局中，“右推”本质是 margin 控制，不是栅格语义。
- 常见错误现象：把
offset-md-2直接换成ms-auto，结果列跑到最右边，而不是“右移两列宽度” - 关键差异：
ms-auto是自动分配剩余空间，而旧 offset 是固定偏移量；若父容器不够宽或有其他 flex 项，ms-auto行为不可控 - 更稳的替代：用空
<div class="col-md-2"></div>占位，或配合ms-{n}（如ms-3）手动设 margin 值 - 注意方向语义：
ms-是 margin-inline-start，在 RTL 页面里会变成右边界，不是绝对“左/右”
Flex 等高失效，真不是 .row 缺 d-flex
.row 在 Bootstrap 5 中默认已是 display: flex，但等高（align-items: stretch）常失败，问题不在类名，而在高度上下文被破坏。
- 典型干扰源：
.row外层有height或overflow: hidden，导致子项无法拉伸；.col内含position: absolute元素（如角标），它不参与高度计算 - 图片没加
img-fluid：某列因图片撑高，其他列无内容，flex stretch 就没锚点可拉 - 真正起效的组合是：
.col上加d-flex+.card上加h-100，且.card必须是.col的**直接子元素** - 慎用
.card-group：该类已在 v5 彻底移除，残留代码会导致样式错乱或控制台报错Unknown pseudo-class selector ".card-group"
最容易被忽略的是：Flex 等高依赖完整的高度继承链，而 Bootstrap 5 的工具类（如 h-100）只作用于直接父容器。一旦中间嵌套了未设高度的 wrapper，整个拉伸就断了——这不是写法问题，是布局树理解偏差。
