.d-none未隐藏是因被更高优先级样式覆盖，如ID选择器、行内样式、更具体选择器或带!important的自定义类；需用DevTools检查display属性被划掉原因，并排查响应式断点、viewport设置、class绑定错误及SSR样式注入问题。
为什么.d-none加了却没隐藏？不是没加载，是被压住了
Bootstrap 4 的 .d-none 确实编译为 display: none !important，但它只对自身选择器生效。一旦遇到更高特异性的规则，照样失效。常见压制来源包括：
- ID 选择器（如
#header { display: block; }） - 行内样式（
style="display: flex"） - 更具体的选择器（如
.form-group .input-field { display: inline-block; }） - 其他带
!important的自定义类（如.my-btn { display: block !important; }）
打开 DevTools → Elements 面板 → 找到目标元素 → 右侧 Styles 面板里看 display 属性：如果 display: none 被划掉，旁边标着“来自 #xxx”或“来自 style 属性”，就定位到根因了。
响应式类混用时，.d-none反而让“小屏该隐藏的没隐藏”
写 class="d-none d-md-block" 本意是“小屏隐藏、中屏起显示”，但若小屏仍可见，大概率不是逻辑错，而是 .d-none 被覆盖了——它本身无媒体查询，只要生效就在所有尺寸下隐藏。
真正要排查的是：
立即学习“前端免费学习笔记（深入）”；
- 是否漏写了
<meta name="viewport">，导致断点未触发，浏览器误判视口宽度 - 是否用了
d-sm-none却期望在 xs（手机）隐藏：Bootstrap 4 的sm断点是 ≥576px，xs 尺寸下d-sm-none根本不生效 - 是否在 Vue/React 中 class 绑定出错，比如
:class="{ 'd-none': visible }"但visible初始值为true，等于根本没加类 - 是否组件封装时拼出两个空格：
class="d-none d-md-block"→ 浏览器忽略第二个类
JS 动态加 .d-none 没反应？先看父容器和水合状态
子元素加了 .d-none 却还占位、或“半隐藏”，常见于 Flex/Grid 容器中：父级设了 display: flex !important，子项虽然 display: none，但老版 Chrome 或 SSR 水合异常时，渲染树可能未及时更新。
另外要注意：
- 服务端渲染（如 Next.js）若未正确注入 Bootstrap CSS，
d-md-none这类带媒体查询的类名即使写对了，浏览器也根本没见过对应样式规则 - 直接
element.classList.add('d-none')后调用getBoundingClientRect()，返回全是 0 —— 因为元素已脱离文档流，这不是 bug，是display: none的必然行为 - 用
classList.toggle('d-none')单独切换，无法感知已有d-md-block等响应式类，容易把“本该在中屏显示”的元素锁死隐藏
别依赖 .d-none 做过渡动画，它天生不支持 transition
display 属性不支持 CSS transition，所以直接加 .d-none 不会有淡出效果，强行加 transition 会卡在中间或直接跳变。
真要实现渐隐后移除，必须分两步：
- 先加样式：
opacity: 0; visibility: hidden;，并设好transition: opacity 0.3s, visibility 0.3s - 监听
transitionend事件，事件触发后再element.classList.add('d-none') - 否则 DOM 还没移除就销毁节点，容易引发 React/Vue 的 hydration mismatch
最易被忽略的一点：.d-none 和 visibility: hidden 行为完全不同——前者彻底移出渲染流，后者仍占位、子元素可聚焦、屏幕阅读器仍能访问。选错就会影响表单提交、键盘导航和无障碍体验。
