Bootstrap 5 中用 d-none 需搭配响应式类（如 d-md-block）才能实现条件隐藏，单独使用 d-none 会全局隐藏；d-sm-none 仅在 ≥576px 隐藏，xs 断点不受影响。
Bootstrap 5 怎么用 d-none 和响应式类隐藏 div
bootstrap 5 默认不提供 hidden-xs 这类旧版命名方式，必须组合使用 d-none + 响应式显示类（如 d-md-block）才能实现“仅在某尺寸及以上显示”，反向即为“在某尺寸及以下隐藏”。
常见错误是只加 d-none，结果 div 在所有尺寸都消失了——因为没指定“在哪恢复显示”。
-
d-none：所有断点下都隐藏 -
d-sm-none：仅在sm（≥576px）及以上隐藏，xs（ -
d-md-none：仅在md（≥768px）及以上隐藏，xs和sm可见 - 要“只在
lg下隐藏”，就写d-none d-lg-block：先全局隐藏，再单独让lg（≥992px）显示
为什么 d-lg-none 不等于“只在 lg 隐藏”
响应式类是“最小宽度生效”，d-lg-none 表示从 lg 断点开始（含）全部隐藏，即：在 lg、xl、xxl 都隐藏，xs/sm/md 才可见。它不是“仅 lg 隐藏”。
如果你真需要“仅在 lg 尺寸隐藏，其他都显示”，就得手动覆盖：d-block d-lg-none d-xl-block —— 先默认显示，再对 lg 单独隐藏，最后对 xl 及以上重新启用显示。
- Bootstrap 断点是递进的，不是互斥的
- 没有
d-only-lg这种类，必须显式控制相邻断点 - 移动端优先原则下，
d-none必须配合至少一个d-*-block或d-*-inline才能生效
用 visually-hidden 替代隐藏时要注意什么
如果目标是“视觉上隐藏但保留可访问性”（比如给屏幕阅读器留文字），别用 d-none，它会彻底移除渲染和语义。改用 visually-hidden。
这个类通过 CSS 把元素缩成 1px、裁剪、透明、绝对定位，人眼不可见，但辅助技术仍能读取。
-
visually-hidden没有响应式变体，如需响应式视觉隐藏，得自己写媒体查询或用visually-hidden-visually-hidden-lg这类自定义类 - 不能和
d-none混用，否则d-none会覆盖掉所有样式，失去“视觉隐藏但可访问”的意义 - 常见误用场景：表单中隐藏 label 文字，却用了
d-none，导致屏幕阅读器无法识别字段用途
自定义断点隐藏（比如只在 1024px 下隐藏）
Bootstrap 原生类不支持任意像素值，如果设计稿要求“仅在宽度 = 1024px 时隐藏”，就必须手写 CSS 媒体查询，或者扩展 Bootstrap 的 Sass 变量。
最轻量做法是加一个内联 style 或独立 class：
@media (min-width: 1024px) and (max-width: 1024px) {
.d-only-1024-none {
display: none !important;
}
}
- 注意
!important是为了压过 Bootstrap 的d-*-*类权重 - 纯 CSS 方案无需改构建流程，适合临时需求
- 若项目已用 Sass，更推荐在
$grid-breakpoints中新增断点，再生成对应工具类
1024px，不如检查是否该用 lg 或 xl 更合理。
