.d-none失效是因为其display: none !important被更高优先级的!important规则覆盖，导致响应式类（如d-md-block）无法在断点下覆盖它；需检查ID选择器、行内样式或自定义!important冲突。
为什么 !important 会让 @media 规则失效
不是媒体查询没跑，是它生成的样式被 !important 锁死在“不可覆盖”状态，导致断点切换时新规则压不进层叠队列。Bootstrap 的响应式类（如 d-md-block）本质是一堆带媒体查询的普通 CSS 规则，它们靠特异性 + 源码顺序生效；一旦你用 !important 给某个基础类（比如 .card { display: block !important }）强行钉死，后续所有媒体查询里同属性的声明——哪怕断点更精准、选择器更具体——都会被无视。
- 典型现象：小屏下
d-none d-md-block不隐藏，因为某处自定义 CSS 写了.sidebar { display: flex !important }，直接堵死了d-none的display: none !important - 验证方法：在 DevTools 的 Computed 面板里看
display值，如果始终显示 “来自.sidebar”，且旁边标着!important，而d-none的那条被划掉，就是它在作祟 - 更隐蔽的情况：Sass 编译时自动注入
!important（比如用@extend或嵌套规则），导致生成的 CSS 里一堆带!important的响应式声明，互相打架
d-none 和响应式类混用时，!important 怎么让断点逻辑错乱
d-none 本身没有媒体查询，它是个“全屏生效”的兜底类；d-md-block 是“≥768px 时设为 block”。两者叠加本该正常工作——小屏只认 d-none，中屏以上则 d-md-block 覆盖掉 d-none。但如果你在其他地方给 display 加了 !important，浏览器会把这条规则塞进最高优先级队列，结果就是：无论视口多宽，那个 !important 规则都压着所有媒体查询规则，d-md-block 根本没机会生效。
- 常见错误场景：Vue 组件里写
:class="{ 'd-none': isHidden, 'd-md-block': !isHidden }"，同时又在全局样式里写了.content { display: grid !important }—— 这时isHidden切换根本没用，display被锁死 - 注意 Bootstrap 5 的断点命名：没有
d-xs-none，d-sm-none实际作用于 ≥576px，手机（!important，问题更难定位 - 临时排查：在 Elements 面板里手动删掉所有带
!important的display声明，再刷新断点，看响应式类是否立刻恢复行为
哪些地方最容易偷偷塞进 !important 导致响应式崩溃
真正危险的不是你亲手写的 !important，而是框架、预处理器或 CMS 自动注入的那些。它们藏得深，且往往在构建后才出现。
- 第三方 UI 库（如某些 Admin 模板）的 CSS 文件里大量使用
!important来“确保样式稳定”，结果和 Bootstrap 的响应式规则正面冲突 - CMS 富文本编辑器插入图片时，自动加
style="width: 600px !important"，直接废掉img-fluid的max-width: 100% - Webpack/Vite 构建时，CSS in JS 库（如 Emotion）的
css函数默认开启!important开关，或通过插件强制注入 - Bootstrap 自身极少用
!important（仅d-none等极少数类），但你升级到 v5.3+ 后，若混用旧版自定义 CSS，里面一堆!important就成了定时炸弹
不用 !important，怎么稳住关键样式又不破坏响应式
核心思路是让样式“可覆盖”，而不是“不可撼动”。响应式依赖的是规则之间的动态博弈，!important 直接砍掉了博弈资格。
立即学习“前端免费学习笔记（深入）”；
- 用更高特异性代替：比如把
.btn-primary { color: red !important }改成.app-header .btn-primary { color: red }，既提升权重，又留出被.btn-primary.active覆盖的空间 - 拆分职责：把“基础过渡”和“状态切换”分开写，例如
.card.transition-base { transition: all 0.2s }+.card.is-collapsed { transform: scale(0.9) }，避免在状态类里重复写transition - 借助属性选择器控制响应式开关：
[data-responsive="off"] .col-md-6 { flex: 0 0 100% }，JS 只改data-responsive值，不碰 class 名，彻底绕开!important陷阱 - 检查构建产物：运行
grep -r '!important' dist/css/，确认打包后的 CSS 里有没有意外混入的!important（尤其注意第三方库的 min.css）
!important 最常出问题的地方不在你写的那几行 CSS，而在你没意识到它已被谁悄悄塞进了构建流程或第三方依赖里。定位时别只盯着自己的代码，先看 Computed Styles 里哪条 !important 规则死死咬住了 display / width / max-width。 
