Bootstrap 5.3+可用display类包括d-none、d-{breakpoint}-{value}（如d-md-block、d-lg-none）等，均基于断点前缀与display值组合，依赖CSS层叠顺序生效，已移除hidden-xs等旧类。
Bootstrap 的 display 工具类能精准控制元素在不同断点下的显隐，但直接写 invisible 或 hidden 会失效 —— 因为 Bootstrap 5+ 已彻底移除这些旧类，只保留响应式 d-{value} 系列。
哪些 display 工具类可用（Bootstrap 5.3+）
Bootstrap 提供的是一组「断点前缀 + display 值」组合，例如 d-none、d-md-block、d-lg-none。它们不是开关式隐藏，而是覆盖式声明：浏览器按 CSS 层叠顺序应用最后匹配的规则。
-
d-none：所有屏幕都隐藏（等价于display: none !important） -
d-sm-none：仅在sm及更大屏幕隐藏（即 ≥576px 隐藏） -
d-md-block：仅在md及更大屏幕显示为 block（即 ≥768px 才生效，更小屏幕不声明 → 默认可能为 inline 或未定义） - 必须成对使用才可靠，比如想「仅在手机显示」，得写
d-block d-md-none
常见错误：为什么加了 d-none d-lg-block 还是看不见？
典型陷阱是忽略「层叠优先级」和「默认 display 值」。如果父容器用了 flex 或 grid，子元素即使设 d-block 也可能被父布局压制。
- 检查是否遗漏基础显示声明：比如在
flex容器里，d-block不会改变 flex 项目行为，得用d-flex或配合flex-grow-0 - 避免混用旧版本类：
hidden-xs、visible-lg在 Bootstrap 5 中完全不存在，写了也无效 - 不要依赖
d-none单独控制响应式 —— 它没有断点，一加全灭；必须搭配如d-none d-md-block才能实现「小屏隐藏、大屏显示」
实际场景写法示例
假设要让一个按钮只在桌面端（≥992px）显示，移动端隐藏：
立即学习“前端免费学习笔记（深入）”；
<button class="btn btn-primary d-none d-lg-block">桌面专用操作</button>
若要反过来，只在手机和平板显示（xs 到 md），桌面隐藏：
<div class="d-block d-lg-none">移动版内容</div>
注意：d-block 是起始状态（所有尺寸都 block），d-lg-none 在 ≥992px 时覆盖为 none，这才是正确逻辑链。
兼容性与性能提醒
这些工具类本质是内联 display 声明，不触发重排（reflow），性能安全。但要注意：
- IE11 不支持
d-grid、d-subgrid等新值，仅推荐用none/block/flex/inline - 若需隐藏同时保留占位（比如避免布局跳动），不能用
d-none，而该用visibility: hidden手动加样式，因为 display 工具类不提供 visibility 控制 - 服务端渲染（SSR）或静态站点中，这些类不会影响 HTML 结构 —— 元素依然在 DOM 里，只是不可见，SEO 和可访问性需额外处理
aria-hidden
真正容易被忽略的是：display 工具类不解决「条件渲染」问题。它只是 CSS 显隐，元素始终存在。如果业务上需要彻底不加载某模块（比如移动端不需要的图表组件），就得交由 JavaScript 或框架（React/Vue）控制真实渲染，而不是靠 d-none 勉强压住。
