Bootstrap 5 使用 d-{breakpoint}-{value} 类控制响应式显隐，如 d-none 全局隐藏、d-sm-none 在 ≥576px 隐藏、d-none d-md-block 仅在 ≥768px 显示、d-block d-md-none 仅在
怎么用 d-{breakpoint}-{value} 控制显隐
bootstrap 5 没有 hidden-xs 或 visible-lg 这类旧写法，所有响应式显示/隐藏必须靠 d- 开头的 display 工具类。核心逻辑是：它不是“设置某个断点生效”，而是“在满足 min-width 条件时应用 display 值”。
常见组合和实际效果：
-
d-none全局隐藏，必须放在类列表最前面，否则会被后续类覆盖 -
d-sm-none只在视口 ≥576px 时生效（即 sm 及以上断点），对 iPhone SE（375px）这类真手机无效 -
d-none d-md-block是“只在中屏及以上显示”的标准写法，生效范围是 ≥768px -
d-block d-md-none是“只在小屏显示”，即 xs + sm（
别指望 d-sm-none 能控制手机竖屏——它压根不匹配 xs 断点。真要覆盖手机，得明确处理 xs：要么用 d-none d-md-block，要么手写媒体查询。
为什么写了 d-sm-none 手机上还是显示
这不是 Bug，是断点机制本身决定的。sm 表示 min-width: 576px，而绝大多数手机竖屏宽度在 360–414px 之间，属于 Bootstrap 的 xs 断点（无前缀类）。d-sm-none 根本不匹配、不解析，CSS 规则不会生效。
验证方法：
- Chrome DevTools 里别只选 “iPhone X” 预设（375px），手动拖动宽度到 576px 以上才能触发
sm类 - 想覆盖真手机，必须用
d-none+ 更高断点（如d-md-block）反向激活 - 如果项目需兼容 iPad Pro 横屏（1024px），它已超默认
lg（992px），但仍是移动场景，此时d-none d-xl-block（≥1200px）更稳妥
多个 d- 类共存时谁生效
类名叠加不是“覆盖”，而是 CSS 层叠优先级按断点顺序起作用。高断点类优先级更高，且只在对应 min-width 区间内激活。
例如：d-none d-md-block d-xl-none 的行为是：
-
d-none先让元素全局隐藏 -
d-md-block在 ≥768px 时设为display: block，覆盖前面的none -
d-xl-none在 ≥1200px 时再设为display: none，再次覆盖
最终生效区间是 768px – 1199.98px（即 md 到 xl 之前）。注意边界值：Bootstrap 的 xl 是 min-width: 1200px，所以 1199.98px 仍属 lg，d-xl-none 不触发。
自定义断点后 d- 类还能用吗
不能直接用。Bootstrap 不支持运行时新增断点类名，比如你加了 "2xl": 1440px，HTML 里写 d-2xl-none 不会生效——它必须经过 Sass 编译生成对应 CSS 规则。
唯一可靠方式：
- 重定义 Sass 变量
$grid-breakpoints，并在@import "bootstrap/scss/bootstrap"前完成 - 新增断点名必须是合法 CSS 类名（不能数字开头、不能含特殊符号）
- 同步更新
$container-max-widths和栅格生成逻辑，否则col-2xl-6也会失效
临时需求建议用原生媒体查询：@media (min-width: 1440px) { .my-2xl-hidden { display: none !important; } }，避免改构建流程。
