d-none 在小屏“不生效”是因为它全局隐藏而非响应式，真正响应式需用带断点前缀的类（如 d-sm-none）；常见错误包括断点匹配偏差、Sass 变量未重编译、未考虑横屏宽度及 viewport 临界抖动。
为什么直接写 d-none 在小屏不生效？
因为 d-none 是全局隐藏类，它在所有断点下都设 display: none，和媒体查询无关。你看到“没生效”，其实是误解了它的行为：它不是“只在大屏隐藏”，而是“在哪都不显示”。真正响应式的是带断点前缀的类，比如 d-sm-none（≥576px 时隐藏）、d-md-block（≥768px 时显示为 block）。
常见错误现象：
- 写了
<div class="d-none d-md-block">却发现手机横屏也显示 → 因为横屏手机宽度常 ≥576px，触发了d-sm-block（隐式生效），而你没加d-sm-none拦截 - 用了
d-lg-none但 iPad 横屏（1024×768）仍显示 → Bootstrap 4 的lg断点是 ≥992px，该尺寸已满足，所以被隐藏；但若设计稿要求“仅在桌面端隐藏”，得确认设备真实 viewport 宽度是否跨过断点
d-{breakpoint}-none 的断点值必须匹配 Bootstrap 4 实际编译结果
Bootstrap 4 默认断点是：xs（无前缀，默认）、sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）。但如果你项目里改过 Sass 变量 $grid-breakpoints 却没重新编译 CSS，HTML 中写的 d-xl-none 就不会生成对应样式规则——浏览器压根不认识这个类。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 想让某提示文字“仅在桌面显示”，用
d-none d-lg-block（先全关，再从 lg 起开）比d-md-block更安全，避免中等平板误显 - 要“仅在手机竖屏显示”，Bootstrap 4 没
d-xs-*类，只能手写媒体查询：@media (max-width: 575.98px) and (orientation: portrait) - 服务端渲染（如 Next.js）中，首次 HTML 直出时 JS 未执行，此时完全依赖 CSS 媒体查询生效，务必确保
bootstrap.css已加载且未被 purged
手写 @media 时 display 切换比 visibility 更可靠
用 visibility: hidden 隐藏元素会保留原始布局空间，容易导致父容器高度塌陷异常、flex 子项错位、或点击穿透到下层元素。尤其在移动端，height: 100% 或 position: absolute 容器内，这种占位问题更明显。
实操建议：
- 优先用
display: none/display: block组合，真正移除/恢复文档流 - 不要用
height: 0; overflow: hidden模拟隐藏——Safari iOS 有重绘 bug，且读屏器可能仍捕获内容 - 需要动画过渡时，
display不支持 transition，得改用opacity: 0+visibility: hidden，并手动控制pointer-events: none - 打印场景必须用
@media print { .no-print { display: none; } }，Bootstrap 4 默认不启用打印工具类，d-print-none不存在
调试时怎么看类到底有没有生效？
别只看 HTML 里写了什么类，打开浏览器 DevTools 的 Elements 面板，选中元素后看右侧 Computed 栏里的 display 值。如果显示 block 但你预期是 none，说明：
- 某个更高优先级的样式覆盖了它，比如组件内联了
style="display: block !important" - 你写的
d-sm-none对应的媒体查询未命中当前 viewport 宽度（例如当前宽度是 767px，而d-sm-none只在 ≥576px 生效，但它没被其他类覆盖，所以仍显示） - CSS 文件加载顺序不对，自定义样式表在 Bootstrap 之前引入，导致工具类被后来的规则覆盖
真正麻烦的不是写错一行媒体查询，而是当折叠屏设备横竖切换时，viewport 宽度在 767px ↔ 768px 之间抖动，max-width: 767px 和 min-width: 768px 的边界刚好卡在临界点上——这时候靠预设类名比手写像素级 media query 更稳。
