d-none 使元素彻底从渲染树移除，不占空间、不可聚焦、子元素失效；需隐藏但保留位置时应改用 opacity/visibility 或 visually-hidden。
为什么 d-none 加上后元素完全消失，连占位都没了
因为 d-none 对应的是 display: none，它不只是“看不见”，而是彻底从渲染树里剔除——不占空间、不影响布局、无法被聚焦、子元素也一并失效。如果你只是想隐藏但保留位置（比如配合 transition 做淡入），d-none 就不合适。
常见错误现象：div 加了 d-none 后，下方元素突然上移；用 JS 检查 offsetHeight 得到 0；用键盘 Tab 切换时跳过了该区域。
- 替代方案：用
visually-hidden（Bootstrap 5.3+）做无障碍隐藏，或手动加opacity: 0; pointer-events: none - 若需过渡动画，必须搭配
opacity和visibility，d-none本身不支持 CSS 动画 - 注意响应式变体如
d-md-none，在小屏仍显示，容易误以为“没生效”
d-block 为什么有时不起作用
d-block 的作用是强制设为 display: block，但它无法覆盖更具体的样式规则，尤其当内联样式、!important 或更高优先级选择器存在时，就会被忽略。
使用场景：常用于响应式切换，比如移动端隐藏导航，桌面端用 d-block 恢复显示；或修复某些组件（如 Vue/React 渲染后遗留的 display: inline）。
- 检查是否被其他 class 覆盖：用浏览器开发者工具看 computed styles，确认
display最终值 - 避免和
!important冲突：Bootstrap 本身不用!important，但项目里自定义 CSS 可能加了 - 注意层级顺序：多个 display 类同时存在（如
d-inline d-block），后面写的生效 —— Bootstrap 是按顺序覆盖的
如何用 JS 安全地切换 d-none 和 d-block
直接操作 classList 最稳妥，不要用 style.display = 'block'，否则会破坏响应式断点逻辑（比如你在 md 屏下设了 display: block，但 d-md-none 本该让它在 sm 下隐藏）。
示例：点击按钮显示一个原本 d-none 的面板
const panel = document.getElementById('my-panel');
panel.classList.remove('d-none');
panel.classList.add('d-block');
- 推荐用
toggle()配合条件判断：panel.classList.toggle('d-none')，但要注意它只控制一个状态，不是“切换到 block” - 如果要精确控制多断点行为（如只在 lg+ 显示），别只加
d-block，改用d-lg-block d-lg-none组合 - Vue/React 中，优先用绑定 class 对象语法，而不是手动操作 DOM
和原生 hidden 属性、aria-hidden 的区别在哪
hidden 是 HTML 属性，等价于 display: none，但它是布尔属性，没有响应式变体；aria-hidden="true" 只影响读屏器，对视觉和布局完全无影响；而 d-none 是纯视觉控制，且支持断点。
容易踩的坑：混用三者导致语义混乱。比如给一个 d-none 元素再加 aria-hidden="false"，读屏器反而会尝试读取一个不可见、无尺寸的元素。
- 需要兼顾可访问性时：
d-none+aria-hidden="true"是合理组合 - 仅隐藏内容但保留在 tab 顺序中？别用
d-none，改用visibility: hidden或position: absolute; left: -9999px -
hidden属性无法用媒体查询控制，也不受 Bootstrap JS 插件（如 Collapse）识别
d-none，而是加完之后那个元素还在不在焦点流里、会不会被屏幕阅读器念出来、以及响应式断点有没有悄悄把它又显示出来。
