d-none d-md-flex 组合有效，实现移动端隐藏、中屏及以上显示为 flex；因 d-none 无断点全局生效，d-md-flex 在 ≥768px 时用 !important 覆盖其 display: none。
d-none 和 d-md-flex 不能直接组合使用来实现“移动端隐藏、中屏及以上显示为 flex”——因为 d-none 的优先级会覆盖后续所有 d-* 类，导致元素在所有断点下都不可见。
为什么 d-none + d-md-flex 不生效
Bootstrap 5 的可见性工具类（如 d-none、d-flex）是通过 CSS display 属性控制的，且所有 d-{breakpoint}-* 类都带有 !important。但关键在于：d-none 是无断点前缀的“全局规则”，它会被后续带断点的类（如 d-md-flex）覆盖——前提是它们作用于同一元素且没有冲突优先级问题。然而实际中，d-none 在源码中定义为：
.d-none { display: none !important; }
而 d-md-flex 定义为：
@media (min-width: 768px) { .d-md-flex { display: flex !important; } }
这意味着：在 768px 及以上，d-md-flex 的 display: flex !important 确实会覆盖 d-none；但在 768px 以下，d-none 依然生效。所以它其实是“有效的”，但容易被误判为“不生效”，常见原因有：
- 浏览器 DevTools 未刷新或缓存了旧样式
- 元素还被其他 CSS（比如自定义
display: none）强制覆盖 - 断点判断错误：比如在 iPad 横屏（
1024px）下测试，却误以为属于 “md” 断点（实际md起始是768px），而忘了sm是576px、lg是992px
d-none d-md-flex 的正确使用场景
这个组合适合「默认彻底隐藏，只在中屏及以上才以 flex 容器形式出现」的布局需求，比如侧边导航栏、桌面端专用操作栏。它不是“渐进显示”，而是“条件启用”。使用时注意：
- 必须确保父容器不干扰子元素的 flex 行为（例如父级有
overflow: hidden或固定高度） - 如果希望“移动端显示为 block，中屏起变为 flex”，应改用
d-block d-md-flex，而非d-none d-md-flex -
d-md-flex只影响该元素自身的display，其子元素是否自动成为 flex item，取决于是否在768px+下也满足 flex 容器条件（即该元素确实渲染为display: flex）
常见踩坑：响应式类叠加顺序与断点继承
Bootstrap 5 的响应式类按断点升序设计，但不会“继承”前面断点的设置。例如：
-
d-none d-lg-flex→ 在xl（1200px+）下仍为flex（因为lg规则持续生效，除非被更高断点显式覆盖） -
d-sm-none d-md-flex→ 在sm（576–767.98px）隐藏，在md+显示为 flex；但在xs（）下，<code>d-sm-none不生效，因此元素默认可见（可能为 block） - 想实现「仅在 md 和 lg 显示，xs/sm/xl 都隐藏」，需写全：
d-none d-md-flex d-xl-none
这种显式声明比依赖“隐式继承”更可靠，尤其在团队协作或长期维护项目中。
替代方案：用 d-{breakpoint}-none 更精准控制
如果目标是“只在某个区间显示”，推荐用断点限定的隐藏类，例如：
- 只在
md到lg显示 flex：用d-md-flex d-xl-none - 移动端隐藏、平板及以上显示：用
d-sm-none d-md-flex（注意sm是576px，不是0） - 真正从最小屏幕开始隐藏，到
md才显示：用d-none d-md-flex—— 这是合法且有效的，只是别忘了在xs和sm下它就是不可见的，这是预期行为
最易被忽略的一点：Bootstrap 5 的断点是 最小宽度（min-width），不是“仅在此宽度”。这意味着一旦触发 d-md-flex，它会一直生效，直到被更高断点的 d-{bp}-none 显式关闭。
