.d-none失效主因是被更高权重css规则覆盖，如id选择器、行内样式、更具体选择器或其它!important声明；可通过devtools的styles面板查看display属性被划掉的来源定位问题。
.d-none 失效，大概率不是它没加载，而是被别的 display 规则压住了——哪怕它带 !important，也扛不住更高权重的选择器。
为什么 !important 也没用？
Bootstrap 4 的 .d-none 确实编译为 display: none !important，但它只对自身选择器生效。一旦遇到这些情况，照样被覆盖：
- ID 选择器（如
#header { display: block; }） - 行内样式（
style="display: flex"） - 更具体的选择器（如
.form-group .input-field { display: inline-block; }） - 其他带
!important的自定义 CSS（比如你写的.my-btn { display: block !important; }）
怎么快速定位是哪个规则干掉了 .d-none？
打开浏览器 DevTools → Elements 面板 → 找到目标元素 → 右侧 Styles 面板里找 display 属性：
- 如果
display: none被划掉，旁边标着 “来自style属性”，那就是行内样式在作怪 - 如果显示的是 “来自
#xxx”，说明 ID 选择器赢了 - 如果看到多个
display值，且只有.d-none那条带!important却仍被划掉，基本可断定有另一个!important在后面声明
JS 动态加 .d-none 后没反应？先看父容器
子元素加了 .d-none 却还占位或“半隐藏”，常见于 Flex/Grid 容器：
- 父容器设了
display: flex !important，某些老版 Chrome 或 SSR 水合异常时，子项的display: none可能不触发重排 - React/Vue 中用
:class="{ 'd-none': visible }"，但visible初始值写反了（比如该为false却写了true），等于根本没加类 - 组件封装时 class 合并出错，比如生成了
class="d-none d-md-block"（两个空格），浏览器直接忽略第二个类
别依赖 .d-none 做渐隐动画
display 不支持 CSS transition，所以直接加 .d-none 不会有淡出效果。真要过渡，得走这套流程：
- 先加
opacity: 0; visibility: hidden;并设好 transition - 监听
transitionend事件 - 事件触发后再
element.classList.add('d-none')
否则动画卡在中间，或者 DOM 还没移除就销毁了节点，容易引发 React/Vue 的 hydration mismatch。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
