d-inline-flex 在 bootstrap 5 中不生效，因其官方未内置该类；需手动添加含 !important 的自定义 css 及响应式变体，并注意与 d-flex 的流式行为差异及常见兼容性陷阱。
为什么 d-inline-flex 在 Bootstrap 5 里不生效？
因为 Bootstrap 5 默认只提供 d-flex、d-inline、d-none 等基础显示类，并不内置 d-inline-flex。你看到的任何“能用”的效果，大概率是自定义 CSS 覆盖、旧版残留、或误用了其他框架的类名。
Bootstrap 官方响应式显示工具类中，flex 相关的仅支持：
-
d-flex（块级 flex 容器） -
d-inline-flex—— 不存在于 v5.0–v5.3 所有正式版本中 -
d-grid/d-inline-grid同理，后者也未提供
如何正确实现内联 Flex 容器效果？
必须手动补充缺失的类，推荐在自定义 CSS 中添加（避免污染 Bootstrap 源码）：
.d-inline-flex {
display: inline-flex !important;
}
.d-inline-flex-sm { display: inline-flex !important; }
@media (min-width: 576px) { .d-inline-flex-sm { display: inline-flex !important; } }
@media (min-width: 768px) { .d-inline-flex-md { display: inline-flex !important; } }
@media (min-width: 992px) { .d-inline-flex-lg { display: inline-flex !important; } }
@media (min-width: 1200px) { .d-inline-flex-xl { display: inline-flex !important; } }
@media (min-width: 1400px) { .d-inline-flex-xxl { display: inline-flex !important; } }
关键点：
- 务必加
!important，否则可能被 Bootstrap 的d-flex或其他 display 类覆盖 - 响应式变体需按 Bootstrap 断点规则手动补全，不能只写一个
d-inline-flex - 不要试图用
d-inline d-flex组合——CSS 中display: inline和display: flex冲突，后者会直接覆盖前者
d-inline-flex 和 d-flex 的实际行为差异
区别不在“是否弹性”，而在于文档流中的占位方式：
-
d-flex：生成块级容器，独占一行，宽度默认撑满父容器 -
d-inline-flex：生成内联级容器，和其他内联元素（如<span></span>、文字）排在同一行，宽度由内容决定 - 两者内部子项的 flex 布局行为完全一致（
flex-direction、justify-content等不受影响）
典型使用场景：d-inline-flex 适合把一组按钮、带图标的标签、筛选 chip 组合后作为行内组件嵌入段落或表单右侧，而不是强制换行。
容易忽略的兼容性与调试陷阱
即使你成功加了 d-inline-flex 类，以下问题仍常见：
- 父容器设置了
white-space: nowrap或overflow: hidden，导致内联 flex 容器被截断却不换行 - 子项用了
flex-grow: 1，但在内联容器中无法拉伸（内联级容器无固有宽度，flex-grow失效） - 在 IE11 中，
inline-flex支持但存在基线对齐 bug，若需兼容，得额外加align-items: baseline或vertical-align: top - DevTools 里看到类名存在但 display 没生效？检查是否被更高优先级的 CSS（比如 Tailwind、自定义 reset）覆盖，或存在拼写错误（如
d-inlineflext）
真正起作用的永远是最终计算出的 display 值，不是类名是否存在。
