d-none 默认全屏隐藏，因其编译为 display: none !important，无媒体查询；需配合断点类（如 d-sm-block）并前置书写才具响应性，与 invisible 的核心区别在于是否保留文档流。
为什么单独写 d-none 会“全屏隐藏”，而不是只在某个尺寸下生效
d-none 本身不含任何媒体查询，它直接编译为 display: none !important，对所有视口尺寸生效。这不是 bug，是设计使然——它就是个“兜底隐藏开关”。想让它响应断点，必须配合带前缀的类（如 d-md-block），且顺序不能错。
常见错误现象：<div class="d-none d-sm-block"> 在手机上依然显示？大概率是忘了 Bootstrap CSS 没加载成功，或用了旧版未编译的自定义断点配置。
<ul>
<li>
<code>d-none 必须放在最前面，否则会被后续断点类覆盖（比如 d-sm-block d-none 实际等于全屏隐藏）
xs（无前缀）、sm（≥576px）、md（≥768px）……没有 d-xs-none，因为 xs 是默认态$grid-breakpoints 变量但没重新编译 CSS，HTML 里写的 d-xl-none 就是无效空类
d-none 和 invisible 到底该选哪个
核心区别就一条：是否保留文档流占位。d-none 让元素彻底从渲染树移除；invisible 只设 visibility: hidden，元素仍在原位，影响 margin、flex 排列、getBoundingClientRect() 结果，甚至子元素聚焦逻辑。
- 做表单步骤切换（如“下一步”后整个区块不再需要）→ 用
d-none，干净利落 - 做按钮禁用态（需保持布局不跳动 + 仍可被键盘 Tab 到）→ 用
invisible或手动加style="visibility: hidden" - 隐藏但要保留屏幕阅读器可访问性 → 别用
d-none，改用visually-hidden类 - JS 检测显隐状态时：
element.offsetParent === null表示d-none生效；getComputedStyle(element).visibility === 'hidden'才对应invisible
用 JS 动态控制 d-none 时容易踩的坑
直接 element.classList.add('d-none') 看似简单，但在 SSR 或响应式类已存在时极易冲突。比如元素原本有 d-md-block，你再加 d-none，由于 !important，它会在所有尺寸下消失，且缩放窗口也不会恢复。
- 不要用
classList.toggle('d-none')单独操作——它无法感知已有断点类，容易把“本该在 md 显示”的元素锁死隐藏 - 更稳妥的方式：先清除所有
d-*类（element.className = element.className.replace(/\bd-\S+/g, '')），再按需添加完整组合，如d-none d-md-block - 动画过渡不支持
d-none直接切换（display不可 transition），想淡出后隐藏，得先设opacity: 0; visibility: hidden，监听transitionend再加d-none - SSR 场景下，服务端和客户端断点判断不一致（比如服务端识别为 mobile，客户端 JS 却按 desktop 渲染），会导致 hydration error。调试时可临时禁用 JS，看纯 HTML 是否符合预期
d-print-none 这类打印专用类怎么用才不翻车
d-print-none 和屏幕断点类完全正交，只在 @media print 下生效。但它不是“补充行为”，而是独立规则——它的特异性（specificity）和其他 d-* 类一样高，共存时会参与层叠。
- 写
d-none d-print-block：所有屏幕尺寸隐藏，仅打印时显示（常用作“仅打印内容”） - 写
d-md-none d-print-none：中屏及以上隐藏 + 打印时也隐藏（可能不是你想要的） - 浏览器打印预览（Ctrl+P）里检查 computed styles，确认最终生效的是哪条
display声明，比猜更可靠 - 没有
d-hover-none或d-reduced-motion-none，这类需求必须手写媒体查询，比如@media (hover: hover) { .hover-hide { display: none; } }
d-none 的 !important 和响应式类的叠加逻辑，既给了确定性，也放大了误用成本。一个类名写错位置，或漏掉 CSS 加载，问题就藏得极深——它不会报错，只会让元素“该出现时不出现，该消失时不消失”。
