最稳妥的做法是用d-none d-lg-block组合：d-none全局隐藏，d-lg-block在≥992px时覆盖显示；因d-md-none仅在≥768px生效，手机竖屏（360–414px）远低于该值，故不触发。
移动端隐藏特定元素，最稳妥的做法是用 d-none d-lg-block 组合 —— 它能确保在所有手机（xs/sm/md）和多数平板上彻底消失，只在 ≥992px 的桌面设备显示。
为什么不能只写 d-md-none
因为 d-md-none 的意思是「视口宽度 ≥768px 时隐藏」，而手机竖屏（通常 360–414px）远低于这个阈值，该类根本不会生效。你加了它，手机上反而照常显示，甚至部分横屏手机（如 iPhone 14 Pro Max 横屏 ≈ 844px）也会被误隐藏。这不是 bug，是 Bootstrap 断点基于 min-width 媒体查询的固有逻辑。
d-none d-lg-block 是怎么工作的
这组类靠 CSS 层叠顺序生效：d-none 带 !important，先全局隐藏；d-lg-block 在 ≥992px 时覆盖为 display: block，且它的断点前缀更高，优先级胜出。
-
d-none：无条件设display: none !important，所有尺寸都失效 -
d-lg-block：仅当视口 ≥992px 时设display: block（不是“仅 lg”，而是 lg 及以上全生效） - 必须
d-none在前，否则d-lg-block无法覆盖默认行为
常见踩坑点
这些错误会导致隐藏失效或布局异常：
- 混用旧类如
hidden-xs或visible-lg—— Bootstrap 5+ 已彻底移除，写了等于白写 - 父容器是
flex或grid，子元素加了d-block但依然不占位 ——display: block在 flex 容器里无效，得配合d-flex或显式设flex: 1 - 用
visibility: hidden替代 —— 元素仍占文档流位置，可能引发布局跳动或焦点异常 - 没加
viewportmeta 标签 —— 移动端浏览器可能以桌面模式渲染，导致断点错位（尤其 iPad 横屏）
需要更精细控制怎么办
比如明确排除 iPad Pro 横屏（1024px），又不想影响普通桌面用户，可升一级用 d-none d-xl-block（≥1200px）。但注意：xl 断点已超出多数项目真实需求，过度收紧会增加维护成本，且容易漏掉 992–1199px 区间的中大屏设备。
真正需要「仅竖屏手机隐藏」的场景极少，绝大多数业务只需覆盖 xs+sm+md（即 ≤991px），d-none d-lg-block 就够用。验证时务必用 DevTools 的设备模拟器手动拖动宽度，别只信预设机型。
