bootstrap 5 中 visually-hidden 仅用于屏幕阅读器隐藏，不响应断点；响应式显示需用 d-{breakpoint}-{value} 类，如 d-none d-md-block 实现中屏及以上显示，且类顺序和断点边界至关重要。
Bootstrap 5 的 visually-hidden 和响应式显示类不是一回事
别把视觉隐藏和响应式显隐混用。visually-hidden 是给屏幕阅读器留内容、但对所有人眼都不可见的辅助类，它不响应断点；真正控制“在某个断点显示/隐藏”的，是 d-{breakpoint}-{value} 这套类。比如 d-md-none 表示「在 md 及更大断点上隐藏」，而 d-none d-md-block 才是「小屏隐藏、中屏及以上显示」的常用组合。
常见错误现象：d-sm-none 写完发现小屏没隐藏——因为 sm 断点起始宽度是 576px，如果你在 575px 宽度测试（比如 Chrome 模拟器设为 iPhone X），它其实还在 xs 断点里，sm 类根本没生效。
-
xs：默认生效（无前缀），sm起才需加前缀 - 断点值有
none、inline、block、flex、grid等，不是只有none和block -
d-none会覆盖所有后续的d-{bp}-*，顺序很重要：要写成d-none d-md-block，不能反过来
怎么让元素只在特定断点区间内显示
Bootstrap 没有内置的「仅在 md 到 lg 之间显示」这种区间类，得靠组合。核心逻辑是：先隐藏所有，再逐个断点开启；或者先全局显示，再在不需要的断点上关闭。
推荐写法（更可控）：d-none d-md-block d-xl-none —— 表示「默认隐藏，中屏起显示，超大屏又隐藏」。注意 xl 是 1200px 起，lg 是 992px，所以这个组合实际生效范围是 md (768px) 到 xl (1200px 以下)。
- 别依赖
d-lg-block d-xl-none去表达「只在 lg 显示」：它会在xl隐藏，但lg本身包含从 992px 到 1199.98px，而xl是 ≥1200px，中间没有缝隙，但容易误判边界 - 如果需要精确控制，建议配合自定义 CSS 类，比如
only-lg，用@media (min-width: 992px) and (max-width: 1199.98px)实现 - 移动端优先项目里，
d-block d-sm-none比d-none d-sm-block更轻量（少一个类）
d-print 和响应式显示类一起用会出问题
打印样式类 d-print、d-print-none 的优先级高于大多数响应式类，而且它不参与断点计算。一旦你写了 d-none d-print-block，那该元素在所有屏幕尺寸下都隐藏，只在打印时显示——这通常符合预期；但如果你写成 d-md-none d-print-block，就可能出现「中屏隐藏，但打印时却意外显示」，而你本意可能是「只在中屏隐藏，打印照常」。
-
d-print类在非打印环境下完全无效，但它的存在会影响 CSS 特异性（specificity），尤其和多个d-*类共存时 - 调试技巧：打开浏览器打印预览（
Ctrl+P），检查 computed styles，看最终生效的是哪个display声明 - 如果既要响应式控制、又要保留打印行为，建议把打印逻辑抽到独立 class，比如
print-only，避免和d-类耦合
自定义断点或改了 $grid-breakpoints 后类名失效
如果你在 Sass 中修改了 $grid-breakpoints（比如加了 xxl: 1400px），那必须同时编译生成对应的 d-xxl-none 等类，否则写了也无效。Bootstrap 官方 CSS 包里不包含未定义的断点类。
- 用官方编译流程时，确保
bootstrap/scss/utilities/_display.scss被 import，且它依赖$display-components和$grid-breakpoints - CDN 引入的 CSS 是固定断点，加了
d-xxl-block不会生效，连 warning 都不会报 - 检查是否误用了旧版语法：Bootstrap 4 的
hidden-sm-up在 v5 已彻底移除，强行写只会被忽略
断点类看着简单，但真正踩坑多在边界判断、类名顺序、以及和打印/自定义构建的交互上。改一行断点配置，可能要同步更新三处地方才能让 d- 类按预期工作。
