Bootstrap中display: none不生效是因响应式类（如.d-md-block）含!important且优先级高，自定义样式需加!important或改用原生媒体查询对齐断点值（如768px），并避免内联style覆盖。
display: none 在 Bootstrap 媒体查询类里为什么有时不生效
因为 Bootstrap 的响应式工具类（如 .d-none、.d-md-block）本质是 CSS 规则叠加，而手写 display: none 可能被它们覆盖——尤其当你在自定义样式表里写，又没处理好优先级或加载顺序。
常见错误现象：div 加了 .d-md-block，但你在自己的 CSS 里写了 div { display: none; }，结果小屏幕下它还是显示；或者反过来，大屏该显示时却藏了。
- Bootstrap 的响应式
display类使用!important（v5.3+ 默认启用），所以自定义display必须也加!important才可能赢过它 - 更稳妥的做法是直接用 Bootstrap 自带的类，比如
.d-none .d-sm-block .d-md-none组合控制显隐，避免手动写 CSS - 如果必须手写媒体查询，记得把断点值对齐 Bootstrap 的定义（如
min-width: 768px对应sm），否则行为会错位
如何用原生媒体查询精准匹配 Bootstrap 断点
Bootstrap 的断点不是魔法值，而是公开的 CSS 变量（v5.3+）或 Sass 变量（v4/v5）。直接抄它的数值最安全，不然你写的 @media (min-width: 769px) 和 Bootstrap 的 sm（起始于 576px）就根本不在一个频道上。
使用场景：需要在某个特定视口隐藏元素，但 Bootstrap 没提供刚好匹配的组合类（比如“只在 md 和 lg 显示，其他全隐藏”）。
立即学习“前端免费学习笔记（深入）”；
- v5.3+ 可以读取 CSS 变量：
@media (min-width: var(--bs-breakpoint-md)) { .my-el { display: none; } } - 兼容旧版或纯 CSS 环境，查 Bootstrap 文档确认断点值（
xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px），然后写@media (min-width: 768px) and (max-width: 991.98px) - 注意
max-width要留 0.02px 余量，避免在边界像素（如 992px）出现双显或双隐——这是浏览器渲染精度导致的常见坑
visibility: hidden vs display: none —— 隐藏时要不要占位
两者效果差异直接影响布局流。Bootstrap 的 .d-* 类全用 display，所以默认不占位；但如果你误用 visibility: hidden，元素还在文档流里，可能撑开空白、影响 Flex/Grid 对齐。
性能影响很小，但语义和行为差别很大：
-
display: none：完全脱离渲染树，不占空间，子元素也不渲染，JS 获取offsetHeight为 0 -
visibility: hidden：仍占布局空间，子元素默认继承隐藏（但可被visibility: visible覆盖），JS 仍能读到尺寸 - 响应式切换时，若用
visibility，父容器高度不会随子元素隐藏而收缩，容易造成意外留白
JavaScript 动态控制隐藏状态时的陷阱
用 JS 改 element.style.display = 'none' 会内联覆盖所有 CSS 类，包括 Bootstrap 的响应式类——一旦你这样设了，哪怕窗口 resize，.d-md-block 也救不回来。
正确做法是操作 class 列表，而不是直改 style：
- ✅ 推荐：
el.classList.add('d-none'); el.classList.remove('d-md-block'); - ✅ 更灵活：
el.classList.toggle('d-none', shouldHide); - ❌ 危险：
el.style.display = 'none';—— 后续媒体查询类失效 - ⚠️ 注意：如果元素原本有
style="display: block"内联样式，JS 改 class 也可能被它压制，得先清空el.style.display = ''
真正麻烦的是嵌套组件或第三方库（比如 Vue/React 封装的 Bootstrap 组件），它们可能内部劫持了 class 更新逻辑。这时候得看文档是否暴露了 visible 类似 prop，而不是硬塞 display 样式。
