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