bootstrap 5 没有 d-sm-inline-flex 类，因其命名违反官方规范；正确格式为 d-inline-flex-sm（断点前缀置于末尾），且需确保无更高优先级 display 类覆盖、父容器布局兼容，并依赖 !important 生效。
Bootstrap 5 没有 d-sm-inline-flex 这个类
直接原因：它根本不存在。Bootstrap 5 官方只提供了 d-inline-flex 和响应式断点变体 d-inline-flex-sm、d-inline-flex-md 等，但**没有 d-sm-inline-flex 这种命名格式的类**。
这是典型的命名混淆——把断点前缀（sm）错误地插在了 display 类型（inline-flex）中间。Bootstrap 的响应式 display 类严格遵循 d-{display}-[breakpoint] 格式，比如：
-
d-inline-flex（无断点，全局生效） -
d-inline-flex-sm（仅 ≥576px 生效） -
d-inline-flex-lg（仅 ≥992px 生效）
写成 d-sm-inline-flex，CSS 解析器会当作一个未定义的类名忽略，自然不生效。
d-inline-flex-sm 写了但没反应？检查这三件事
即使用了正确的类名，也常因环境问题“看起来没效果”：
- 父容器或祖先元素设置了
d-none或其他 display 类（如d-flex），且优先级更高或顺序不当，导致被覆盖 - 元素本身是
<span></span>、<a></a>等天然 inline 元素，但父容器用了flex-direction: column或grid布局，此时display: inline-flex可能被上下文压制 - 没加
!important—— Bootstrap 的d-inline-flex-sm类内部带!important，但如果你自定义 CSS 或第三方库写了同名 display 规则却没加!important，反而会被它覆盖；反过来，如果别人写了更强的display: block !important，那d-inline-flex-sm就彻底失效
想让元素“只在小屏用 inline-flex”，别只靠一个类
d-inline-flex-sm 的语义是“≥576px 时设为 inline-flex”，它不管 xs 断点（inline，看不出变化。
真正要实现“仅小屏启用 inline-flex”，得组合控制：
-
d-inline-flex d-sm-inline-flex d-md-none：xs 和 sm 用 inline-flex，≥768px 隐藏（注意顺序，d-md-none必须放最后） - 更稳妥的是显式声明基础态：
d-inline d-sm-inline-flex d-md-none，避免依赖默认 display - 切勿写
d-none d-sm-inline-flex——d-none无条件生效，后面所有断点类都救不回来
替代方案：不用工具类，直接写媒体查询更可控
当响应式逻辑变复杂（比如要结合 orientation、宽高比或 JS 动态判断），Bootstrap 工具类反而容易绕晕。这时候直接写 CSS 更清晰：
@media (min-width: 576px) and (max-width: 767.98px) {
.my-inline-flex-on-sm {
display: inline-flex !important;
}
}
尤其在需要精确匹配“竖屏手机”这种场景时，纯 CSS 媒体查询 + orientation: portrait 是唯一可靠方式，Bootstrap 的断点类做不到。
工具类省事，但它的设计前提是“简单开关”。一旦需求超出单维度断点控制，硬凑类名只会让调试变成猜谜。
