Bootstrap 5+用d-{breakpoint}-{value}类控制显隐，需理解断点叠加逻辑：d-none须前置作全局隐藏，再用d-md-block等反向激活；d-sm-none仅在≥576px生效，手机xs断点无效；多类共存时高断点优先，如d-none d-md-block d-xl-none生效区间为768px–1199.98px。
怎么用 d- 类控制元素在不同断点显隐
bootstrap 5+ 只保留 d-{breakpoint}-{value} 这一套响应式 display 工具类，旧的 hidden-xs、visible-lg 全部失效。关键不是“加个类就生效”，而是理解它怎么叠加、在哪生效。
-
d-none是全局开关，写在最前面才能被后续断点类“反向激活”；写在后面会被覆盖 -
d-sm-none只在视口 ≥576px 时隐藏，对 iPhone SE（375px）、Nexus 5X（412px）这类真手机完全不生效——它们属于xs断点，没前缀类才管用 - 想“只在手机显示”，得写
d-block d-sm-none（默认显示，从 sm 起隐藏），而不是d-none d-sm-block（那是手机隐藏、平板起显示） - 多个类共存时，高断点类优先级更高：
d-none d-md-block d-xl-none表示：全屏隐藏 → md 起显示 → xl 起再隐藏，实际生效区间是 768px–1199.98px
为什么写了 d-sm-none 手机上还是显示
这不是 Bug，是断点机制本身决定的。sm 是 “min-width: 576px”，意味着只有宽度 ≥576px 的设备才会触发该类。绝大多数手机竖屏宽度在 360–414px 之间，压根进不了 sm 断点，d-sm-none 根本不匹配、不生效。
- 测试时别依赖 Chrome 模拟器的 “iPhone X” 预设（375px），它属于
xs；要验证sm行为，必须手动拖动宽度到 576px 或以上 - 真正想覆盖手机屏，得明确处理
xs：用d-none d-md-block（手机+平板隐藏，桌面起显示），或d-block d-md-none（手机显示，桌面起隐藏） - 如果项目需适配 iPad Pro 横屏（1024px），它已超过默认
lg（992px），但仍是移动场景——此时d-none d-xl-block（≥1200px 显示）可能更稳妥
自定义断点后怎么让 d- 类生效
Bootstrap 不支持运行时动态新增断点类名。你加了 "2xl": 1440px，不代表 HTML 里写 d-2xl-none 就能用——它必须经过 Sass 编译生成 CSS 规则。
- 唯一可靠方式是重定义 Sass 变量
$grid-breakpoints，并在@import "bootstrap/scss/bootstrap"前完成，顺序不能错：先functions，再variables，然后重定义，最后主文件 - 新增断点名（如
2xl）必须是合法 CSS 类名（不能含数字开头、不能有特殊符号），且要同步更新$container-max-widths和栅格生成逻辑，否则col-2xl-6这类也会失效 - 如果只是临时补充逻辑，可用 CSS 媒体查询模拟：
@media (min-width: 1440px) { .my-2xl-hidden { display: none !important; } }，但无法生成原生d-2xl-none类，得手动维护
d-print 和响应式类混用会出什么问题
d-print 类优先级高于几乎所有 d-{breakpoint}-* 类，而且它不参与断点计算，只在打印上下文生效。混用时容易误判行为。
-
d-none d-print-block是安全的：屏幕全隐藏，仅打印时显示 -
d-md-none d-print-block有问题：中屏及以上隐藏，但打印时仍显示——如果你本意是“中屏隐藏，打印时也照常显示”，那就错了；真正想要的是去掉d-print-block，或单独用d-print-none - 所有
d-print-*类都会提升 CSS 特异性（specificity），和多个d-类共存时可能打破预期层叠顺序，调试时建议用浏览器 DevTools 查看最终 computed display 值
@media (max-width: 575.98px) 更可控。
