Bootstrap 5 用 d-none 隐藏元素（移出渲染流），需配对 d-block/d-flex 等恢复显示并匹配原布局；visually-hidden 仅视觉隐藏但保留占位；响应式类如 d-md-none 仅在指定断点生效，需注意断点阈值与层叠顺序。
Bootstrap 的 display 类怎么控制显隐
Bootstrap 5 默认不提供 hide 或 show 这类独立的显示/隐藏类，而是用响应式 display 工具类组合实现。核心是：d-none 完全隐藏（display: none），d-block、d-flex 等恢复显示并指定布局类型。
常见错误是直接写 d-none d-block 在同一个元素上——后者不会生效，因为 CSS 层叠规则下，后声明的类若属性值相同会覆盖前一个，但 d-none 和 d-block 都设置了 display，且 d-none 在 Bootstrap CSS 中位置靠后（实际取决于引入顺序），所以往往还是隐藏。
- 要切换显隐，必须动态增删类，比如用 JavaScript 切换
d-none和d-block -
d-inline、d-flex、d-grid等也都能“取消隐藏”，但会同时改变 display 值，需匹配原始布局需求 - 如果原元素是
display: flex，用d-block恢复会破坏 flex 布局，应优先选d-flex
为什么 visibility: hidden 类不能替代 d-none
invisible 类（Bootstrap 5 中为 visually-hidden，旧版是 invisible）只是让元素不可见但保留空间，而 d-none 是彻底移出渲染流。两者行为完全不同。
-
d-none：元素不占位、不响应事件、不影响布局流 -
visually-hidden：仍占位、可被焦点访问（适合无障碍）、能触发 hover/focus 伪类 - 例如表单校验提示文字，用
visually-hidden可兼顾屏幕阅读器；而临时禁用整块操作区，该用d-none
响应式显示隐藏怎么写才不踩坑
Bootstrap 的响应式 display 类（如 d-md-none、d-lg-block）本质是媒体查询封装，但容易误以为“隐藏在中屏”就等于“只在小屏显示”——其实不是。
-
d-none d-md-block表示：所有断点都隐藏，**仅在md及更大断点显示** -
d-md-none d-lg-block表示：在md断点隐藏，在lg及以上显示；sm和xs下它仍存在（没被隐藏），所以默认按父容器和自身 display 值渲染 - 务必检查断点定义：Bootstrap 5 默认
md是 ≥768px，lg是 ≥992px，别凭感觉猜 - 不要混用
d-none和d-print-none等打印专用类，它们作用域不同
JavaScript 切换时要注意 DOM 同步时机
用 element.classList.toggle('d-none') 是最简方式，但如果你在事件中快速连续调用、或依赖后续元素尺寸（比如动画、高度计算），可能因浏览器未完成重排（reflow）而读到旧值。
- 避免在
click后立刻读offsetHeight—— 此时可能还是 0（刚加了d-none）或旧值（刚移除了但未重排） - 需要精确尺寸时，可用
getComputedStyle(element).display判断当前状态，或用requestAnimationFrame延迟到下一帧再读 - Vue/React 用户注意：框架的响应式更新和 DOM 渲染有异步延迟，直接操作 class 可能绕过响应式系统，导致状态不一致
真正麻烦的不是记不住类名，而是忘记 d-none 不是“开关”，而是“强制覆盖”。它不关心你原来是什么 display 值，也不管你是否用了 flex/grid，加了就是消失。恢复时得自己配对——配错一个，布局就塌一半。
