.d-{breakpoint}-none 是 Bootstrap 5+ 控制响应式显示/隐藏的统一工具类，如 .d-md-none 在中等屏及以上隐藏元素，.d-sm-block.d-md-none 实现仅小屏显示；注意 .d-sm-none 仅在 ≥576px 生效，手机小屏不受影响。
用 .d-{breakpoint}-none 控制显示/隐藏最直接
bootstrap 5+ 已彻底移除旧版 .hidden-xs、.visible-lg 这类命名，统一改用 .d- 前缀的 display 工具类。想让某个元素在「中等屏及以上隐藏」，就写 .d-md-none；想「只在小屏显示」，就组合 .d-sm-block .d-md-none。
常见错误现象：写了 .d-sm-none 却发现元素在手机上也没消失——因为 .d-sm-none 只在 ≥576px（sm 断点起始）时生效，而手机屏幕通常 div 是 block）。
-
.d-none：所有尺寸都隐藏（慎用，会覆盖后续断点类） -
.d-sm-none：仅当视口 ≥576px 时隐藏 -
.d-md-block：仅当视口 ≥768px 时设为display: block（常配合.d-none使用） - 多个类可共存，CSS 层叠按断点顺序生效，高断点类优先级更高
移动端隐藏要特别注意断点边界值
所谓“移动端”，实际对应的是 xs（sm（576px–767px）设备。如果你的目标是「纯手机屏隐藏」，不能只写 .d-sm-none——它在 576px 宽的窄屏平板（如旧款 iPad mini）上也会触发，误伤。
更稳妥的做法是明确排除 xs：用 .d-none .d-sm-block 表示「默认隐藏，仅在 sm 及以上显示」；或反向写 .d-block .d-sm-none 表示「默认显示，从 sm 开始隐藏」。
- Bootstrap 断点是 min-width 媒体查询，不是区间匹配
- 没有
.d-xs-none类——xs 是默认态，靠不加类或.d-block等基础类维持 - 真要精确控制 0–575.98px，只能手写媒体查询，Bootstrap 不提供此类工具类
隐藏后布局塌陷？别忘了考虑文档流影响
.d-*-none 是通过 display: none 实现的，元素完全脱离文档流。如果它原本是栅格列（如 .col-md-4），隐藏后同级其他列会自动占满剩余宽度——这通常是期望行为；但若它嵌套在 flex 容器里，又没设 flex: 1，可能导致父容器高度坍缩。
性能与兼容性影响很小，这些类本质就是 CSS 规则，无 JS 开销。但要注意：IE10/11 支持 display: none 没问题，但不支持 display: contents 等新值，而 Bootstrap 5 的 .d-*-contents 在 IE 下会退化为 display: block，这点容易被忽略。
- 隐藏后需保持占位？改用
.invisible（透明但占空间）或.opacity-0 - 打印场景下隐藏？用
.d-print-none，它和屏幕断点互不干扰 - 服务端渲染（如 SSR）时，这些类只在客户端生效，服务端不会做响应式判断
为什么 .d-md-none 在某些设备上没反应？
最常见原因是 viewport meta 标签缺失或错误，导致移动端浏览器未启用响应式渲染模式。检查页面 是否有：
<meta name="viewport" content="width=device-width, initial-scale=1">。没有它，iPhone Safari 会以 980px 宽度渲染页面，所有
xs/sm 断点都会失效，.d-md-none 自然也不起作用。
另一个隐蔽坑：自定义构建 Bootstrap 时若删掉了 display 工具类模块（比如只引入了 grid 而非 utilities），.d-* 类根本不会生成 CSS 规则，浏览器开发者工具里查不到对应样式。
- 用浏览器 DevTools 的「Toggle device toolbar」实测，别只信模拟宽度数字
- 真机调试时注意系统级缩放（如 iOS「显示大小」设为「更大」，可能改变逻辑像素宽度）
- 第三方 UI 库（如 Vue Bootstrap）可能封装了自己的响应式指令，和原生
.d-类混用易冲突
.d- 类只是快捷方式，背后全是媒体查询。真正卡住人的，往往不是类名记错，而是忘了 viewport 或压根没测真机。
