最稳妥写法是.d-none .d-md-block：先全局隐藏，再在≥768px（md）起显示，确保手机端（xs/sm）完全隐藏、pc端正常显示。
手机端用 d-none d-md-block 隐藏元素最稳妥
Bootstrap 5 的响应式 display 工具类基于断点设计，手机端（xs）默认无最小宽度限制，但所有 sm 及以上类都会在 xs 下失效。想让元素「只在手机上消失、PC 上显示」，必须显式覆盖 xs 断点。d-none d-md-block 是最常用且兼容性最好的组合：它在 xs 和 sm（md（≥768px）以下都隐藏，从 md 开始显示。
常见错误是只写 d-md-none——这反而会让元素在手机上显示、中屏开始隐藏，和需求完全相反。
-
d-none无条件隐藏，是基础重置项，必须放在前面 -
d-md-block在 ≥768px 恢复为block，不是“仅在 md 显示”，而是“md 及以上都生效” - 若需在
sm（576px）就显示，改用d-none d-sm-block - 不要混用
d-lg-none等反向类，逻辑易错且不可维护
别用 d-sm-none 实现“仅手机隐藏”
d-sm-none 的实际行为是「在 ≥576px 时隐藏」，也就是手机（sm 就联想“small”，误以为它控制小屏，其实 Bootstrap 的断点命名是「最小宽度触发」，sm 表示“从这个宽度起应用该规则”。
真实场景中，iPhone SE（375px）、部分安卓小屏（412px）都属于 xs，它们会忽略所有带 sm 及以上后缀的类。所以依赖 d-sm-none 的写法，在这些设备上完全不生效，元素始终可见。
- 查文档确认断点值：
xs（sm（≥576px）、md（≥768px） - 手机端隐藏 = 覆盖
xs+sm，至少到md才放开 - 用浏览器 DevTools 的设备模拟器验证，别只看预设机型
需要适配 iPad Pro 等大屏手机？优先考虑 d-none d-xl-block
iPad Pro 12.9" 横屏宽度达 1024px，已超过 Bootstrap 默认 lg 断点（≥992px），但它仍可能被用户当作“移动设备”使用。如果业务明确要求「连这类大屏手机也要隐藏」，就不能止步于 d-md-block。
此时可升一级用 d-none d-xl-block（xl ≥1200px），或更精细地自定义断点。但要注意：过度收紧显示范围会提高维护成本，且多数项目并不真需要区分 iPad Pro 横屏和桌面显示器。
- 先确认真实用户设备分布，别为小众场景提前加复杂度
- 若必须定制，修改
$grid-breakpointsSass 变量比硬编码类更可靠 - 避免嵌套媒体查询 + display 类混用，CSS 层叠顺序容易失控
JavaScript 动态切换 display 类要小心重排
用 JS 控制 classList.toggle('d-none') 看似简单，但如果频繁触发（比如滚动监听、resize 事件），可能引发强制同步布局（forced reflow），尤其在低端 Android 设备上卡顿明显。
真正需要动态控制时，优先用 CSS 变量或 data- 属性配合属性选择器，把逻辑留在样式层；非要用 JS，记得节流（throttle）并用 requestAnimationFrame 批量更新。
- 避免在
scroll里直接操作 class，改用IntersectionObserver判断可视区域 - 不要用
getComputedStyle(el).display === 'none'做条件判断，它会触发回流 - 若只是开关状态，用
aria-hidden="true"配合视觉隐藏类更语义化
display 的快捷映射，没有魔法。关键在于理解断点生效逻辑，而不是记忆类名组合。实际项目里，d-none d-md-block 覆盖 90% 的“手机隐藏”需求，其余情况往往说明设计本身需要重新评估——比如是否真该用不同内容，而非单纯隐藏。
