Bootstrap如何让按钮在大屏下显示图标在小屏下只显示文字-Bootstrap教程-PHP中文网

按钮图标响应式切换的关键是用sr-only和媒体查询控制可见性，Bootstrap不提供一键切换类，需组合d-none/d-*类与分段span实现大小屏图文交替显示。

按钮图标响应式切换的关键是用 `sr-only` 和媒体查询控制可见性

bootstrap 本身不提供“大屏图标+小屏文字”的一键切换类，得靠组合现有工具手动控制。核心思路是：默认显示图标（大屏），再用 sr-only 把文字包起来，并在小屏下让图标隐藏、文字显形。

常见错误是直接用 hidden-xs（Bootstrap 3）或 d-none d-md-inline（Bootstrap 4/5）套在图标上——这会导致小屏文字也消失，或者图标残留空白占位。

Bootstrap 4/5 推荐用 d-none d-sm-inline 控制图标：图标在 sm 及以上显示，xs 下完全隐藏
文字部分用 sr-only（语义化隐藏）+ 小屏显形类，比如 sr-only sr-only-md（Bootstrap 5）或自定义媒体查询
图标必须用内联元素（如 <i></i> 或 <svg></svg>），不能套块级容器，否则影响对齐

Bootstrap 5 实操写法（推荐）

Bootstrap 5 移除了 sr-only 的响应式变体，需配合 visually-hidden 和断点类手动组合：

<button type="button" class="btn btn-primary">
  <i class="bi bi-download d-none d-sm-inline me-1"></i>
  <span class="d-inline d-sm-none">下载</span>
  <span class="d-none d-sm-inline">下载</span>
</button>

说明：

d-none d-sm-inline 让图标只在 sm 及以上显示；me-1 提供右侧间距
两个 <span></span> 分别控制不同断点下的文字：小屏只显示第一个，大屏只显示第二个
避免用单个 <span></span> 套文字再加 visually-hidden——那样无法实现“小屏显形”，得拆开

Bootstrap 4 兼容写法

Bootstrap 4 没有 d-sm-inline，得用 d-none d-md-inline（对应 md 断点），并注意 sr-only 类不响应断点：

VPS Bootstrap

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

下载

<button type="button" class="btn btn-primary">
  <i class="fa fa-download d-none d-md-inline mr-1"></i>
  <span class="d-inline d-md-none">下载</span>
  <span class="d-none d-md-inline">下载</span>
</button>

关键差异：