图标仅在≥md断点显示、文字仅在<md断点显示，通过d-none d-md-inline（文字）和d-md-inline d-lg-none（图标）等响应式display类组合实现。

按钮图标只在大屏显示、文字只在小屏显示的实现逻辑

Bootstrap 本身没有“大屏显图标、小屏隐文字”这种开箱即用的类，得靠响应式工具类组合 + 结构设计来达成。核心思路是：把图标和文字分别包裹，用 visible-* 或 d-none d-md-inline 这类显示/隐藏类控制它们在不同断点的可见性。

使用 d-{breakpoint}-none 和 d-{breakpoint}-inline 控制显隐

Bootstrap 5+ 已废弃 visible-*/hidden-*，统一用 d-（display）前缀。关键不是“隐藏文字”，而是“让图标只在 >=md 显示，文字只在

• <span class="d-none d-md-inline"><i class="bi bi-search"></i></span>：小屏（
• <span class="d-inline d-md-none">搜索</span>：小屏显示，中屏及以上隐藏文字
• 按钮内结构要并列包裹，不能让图标或文字被父容器的 flex 或 text-align 意外裁剪
• 注意 d-md-none 对应的是 min-width: 768px，如果项目改过断点，需同步调整类名

完整按钮示例与常见错误

下面是一个带图标+文字的响应式按钮写法：

<button type="button" class="btn btn-primary">
  <span class="d-none d-md-inline"><i class="bi bi-search"></i></span>
  <span class="d-inline d-md-none">搜索</span>
</button>

容易踩的坑：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 直接给 <i> 加 d-md-none —— 错，这会让图标在中屏消失，目标是反的
• 用 sr-only 或 visually-hidden 替代显示控制 —— 这些是为屏幕阅读器服务的，不控制视觉显隐
• 图标用 <svg> 但没设宽高，导致小屏时图标残留空白 —— 建议加 width="1em" height="1em" 或用 Bootstrap 的 icon 类统一尺寸
• 按钮内同时存在图标和文字时，小屏下文字换行撑高按钮 —— 可加 text-nowrap 防止

兼容旧版 Bootstrap 4 的写法差异

如果还在用 Bootstrap 4，类名不同，且断点命名略有区别：

• Bootstrap 4 用 hidden-sm-down 表示“小屏及以下隐藏”，对应的是 sm（576px）起始，不是 md
• 正确写法：<span class="d-none d-md-block"><i class="fa fa-search"></i></span>（BS4 中 d-md-block 等效于 BS5 的 d-md-inline）
• BS4 没有 d-{bp}-none，得用 hidden-{bp}-up / hidden-{bp}-down，语义更绕，建议升级或统一用 d- 前缀（BS4.6+ 已支持部分 d- 类）

断点定义和类名映射必须查当前版本文档，抄错一个字母就失效。