应使用 d-block d-sm-none；Bootstrap 4/5 已移除 visible-xs-block 等旧类，d-block d-sm-none 表示所有尺寸显示但≥576px 隐藏，实现仅手机可见且不占布局空间。
用 visible-xs-block 还是 d-sm-none d-block？先看 Bootstrap 版本
bootstrap 3 和 bootstrap 4/5 的隐藏显示机制完全不同，混用 class 会完全失效。如果你的项目用了 bootstrap 4+（绝大多数新项目），visible-xs-block、hidden-md 这类旧 class 已被移除，写了也不起作用。
- Bootstrap 3：用
visible-xs-block（手机显示）、hidden-lg hidden-md hidden-sm（PC 全隐藏） - Bootstrap 4/5：必须用响应式 display 工具类，比如
d-block d-sm-none（手机显示，≥576px 隐藏） - 别查“手机端”就默认写
xs——Bootstrap 4 起已弃用xs前缀，最小断点叫sm（576px），但语义仍是“手机优先”
d-block d-sm-none 是最稳妥的写法
想让内容只在手机端可见、PC 端彻底消失（不占位、不影响布局），就用这个组合。它等价于「在所有尺寸显示，但在小屏及以上全部隐藏」，实际效果就是仅手机可见。
-
d-block：默认显示（覆盖浏览器默认或父级可能设的display: none） -
d-sm-none：当视口 ≥576px（即小屏平板起）时，强制display: none - 别用
d-none d-md-block反推——那是在 PC 显示、手机隐藏，方向反了 - 如果项目用了 Bootstrap 5.3+，还可考虑
d-md-none配合d-block，但需确认你真要从 768px 才开始隐藏（多数场景 576px 更合理）
容易踩的坑：隐藏 ≠ 视觉不可见
很多人加了 hidden-xs 或 d-sm-none 后发现手机上还是看不见，其实是被其他样式覆盖了，或者元素本身被父容器 overflow: hidden 截断。
- 用浏览器开发者工具检查最终计算出的
display值，别只看 class 列表 -
d-*-none是硬性移除渲染，而invisible类只是visibility: hidden，仍占布局空间——这不是“隐藏”，只是“变透明” - 如果内容在
nav或navbar里，注意 Bootstrap 自带的折叠逻辑（如navbar-collapse）可能已接管显示逻辑，额外加d-sm-none会冲突
移动端适配不是只有“显/隐”，还要考虑交互合理性
单纯让一段文字手机显示、PC 隐藏没问题，但如果这是个操作按钮（比如“拨打电话”），就得同步处理行为：手机端点击应调起拨号，PC 端隐藏后不能留空交互点，也不能让 JS 事件监听器还挂在已 display: none 的元素上。
- DOM 被
d-*-none移除后，绑定在其上的事件不会触发，这点安全；但若用visibility: hidden或opacity: 0，事件仍可触发，容易误操作 - 如果内容涉及数据加载（比如手机端才请求某个 API），别只靠 CSS 控制显隐——得配合 JS 判断
matchMedia或用getComputedStyle检查是否真实渲染，否则可能白请求 - 某些安卓 WebView 对
d-sm-none支持滞后，如遇异常，降级用媒体查询内联样式：style="display: none;" media="(min-width: 576px)"
