d-block不显示是因为它仅在对应断点及以上生效，未达断点时保持原有display值；d-none因display:none!important彻底移除元素，无法动画。
为什么 d-block 加了也不显示
因为 d-block 只在对应断点及以上生效，它不负责“兜底”——如果当前屏幕尺寸没达到该断点，它就完全不生效，元素保持原有 display 值（可能是 inline、flex，甚至被父容器强制约束）。常见误判是：给一个默认 display: inline 的 <span></span> 加 d-lg-block，结果在小屏看不出来，以为“失效”，其实是 lg 断点（≥992px）根本没触发。
检查要点：
- 用浏览器 DevTools 的「Toggle device toolbar」切到目标宽度，确认是否真进入了该断点（比如
d-md-block要 ≥768px） - 在 Styles 面板里看 computed
display值，不是只看 class 列表 - 避免和内联样式冲突：
style="display: inline"会直接压过d-block，除非它带!important - 多个 display 类共存时，后写的生效（如
d-inline d-block→ 最终是block）
d-none 为什么一加就彻底消失，连动画都做不了
d-none 对应的是 display: none !important，它不是“视觉隐藏”，而是让元素彻底退出渲染树：不占空间、无法获取焦点、子元素全部失效、JS 读取 offsetHeight 为 0。最关键的是，display 属性本身不能参与 CSS transition，所以你没法对 d-none 做淡入/滑动动画。
需要过渡效果时，必须换方案：
- 用
opacity: 0+visibility: hidden控制视觉显隐（支持 transition） - 动画结束后再用 JS 加
d-none，或移除opacity/visibility类 - 别混用
d-none和invisible：invisible是visibility: hidden，仍占位；d-none是真移除 - 若需无障碍支持，单独加
aria-hidden="true"，它不影响布局，只告诉读屏器跳过
怎么写才能“只在中屏显示”，其他尺寸都隐藏
Bootstrap 没有内置的区间类，必须靠组合。正确写法是：d-none d-md-block d-xl-none。它的逻辑是：先全局隐藏，再在 md（≥768px）起启用 block，最后在 xl（≥1200px）再次关闭。
容易出错的地方：
-
d-none d-sm-block≠ “只在小屏显示”——d-sm-block在 ≥576px 生效，横屏手机、平板都算，竖屏手机（≈390px）反而不显示 - 顺序不能反：
d-md-block d-none是错的，d-none会直接覆盖掉后面的断点类 - 别用
d-xs-none：Bootstrap 5 已移除所有xs前缀类，写了无效 - 如果目标是“仅竖屏手机”，纯 CSS 无法可靠判断朝向，得结合 JS 监听
orientationchange或用媒体查询@media (max-width: 575.98px) and (orientation: portrait)
JS 动态切换时，为什么 d-none 切不回来
直接改 element.style.display = 'block' 看似简单，但会破坏响应式逻辑：比如你在 md 屏下设了 display: block，但 d-md-none 本该在 sm 屏下让它隐藏，现在却被行内样式锁死。
安全做法永远是操作 class：
- 显示：用
el.classList.remove('d-none')，不要加d-block——除非你明确要覆盖原有 display 模式 - 隐藏：用
el.classList.add('d-none')，它比style.display = 'none'更干净，且保留响应式类的控制权 - 切换多断点行为（如“只在 lg+ 显示”）：优先用
d-lg-block d-xl-none组合，而不是手动增删d-none - Vue/React 中，用 class 绑定对象语法：
:class="{ 'd-none': isHidden }"，避免直接操作 DOM
最常被忽略的一点：d-none 的 !important 很强，但它挡不住 ID 选择器或行内样式。如果你发现加了 d-none 还是不隐藏，第一反应不该是“类没生效”，而是打开 DevTools 查 computed styles，看最终 display 值到底被哪条规则覆盖了。
