Bootstrap如何让按钮在大屏显示文字说明在手机端只显示Icon图标

Bootstrap 5 实现按钮文字响应式隐藏的正确方法是使用 visually-hidden 类配合 d-none d-md-inline 等响应式显示类，而非 sr-only（已废弃）或自定义 CSS；按钮内图标与文字应并列，借助 btn 的 inline-flex 布局确保对齐。

Bootstrap 5 如何实现按钮文字响应式隐藏

直接结论：用 visually-hidden + 媒体查询类组合，配合 d-none d-md-inline 控制文字显示，而不是靠 JS 或自定义 CSS 覆盖。

Bootstrap 5 默认不提供“仅在大屏显示文字、小屏只留 icon”的现成工具类，但它的响应式显示类（d-{breakpoint}-{value}）和语义化辅助类 visually-hidden 完全能干净解决——关键是别误用 sr-only（已废弃）或暴力写 display: none。

为什么不用 sr-only？

sr-only 是 Bootstrap 4 的类，Bootstrap 5 中已被移除，替换成更语义准确的 visually-hidden。如果项目还在用旧类名，会失效且无警告。

1. ✅ 正确写法：visually-hidden（视觉隐藏但保留屏幕阅读器可读）
2. ❌ 错误写法：sr-only（Bootstrap 5 不识别）
3. ⚠️ 避免写 text-hide（Bootstrap 3 遗留，早已弃用）

按钮结构怎么写才可靠？

核心思路：把文字包裹在带响应式显示类的 span 内，icon 单独放，两者并列；不要把整个按钮设为 d-md-none 再重写小屏样式——那样容易破坏按钮尺寸和点击热区。

<button type="button" class="btn btn-primary"><i class="bi bi-download"></i><span class="d-none d-md-inline">下载文件</span></button>

1. d-none：所有断点都隐藏文字
2. d-md-inline：从 md（768px）起恢复为 inline，覆盖前面的 d-none
3. icon 始终可见，不加任何 display 类
4. 按钮自身不设宽度或 padding 调整——Bootstrap 按钮默认 padding 在各断点下已适配

遇到图标错位或文字换行怎么办？

常见现象是小屏下 icon 和文字没对齐，或文字在中等屏突然换行挤出按钮外。根本原因不是类写错，而是内联元素盒模型和父容器 flex 行为没对齐。

1. 确保按钮有 btn 类——它自带 display: inline-flex 和 align-items: center，否则 icon 和文字会垂直偏移
2. 避免给 span 加 font-size 或 line-height：这些会破坏按钮内部行高一致性
3. 如果用了 Font Awesome 或 Bootstrap Icons，确认图标本身是 inline 元素（<i> 默认就是），不需要额外设 vertical-align
4. 真要微调间距，用 me-1（margin-end）比 mr-1 更稳妥，适配 RTL

实际效果取决于你用的断点阈值（md 对应 768px），如果设计稿要求在 992px 才显示文字，就换成 d-none d-lg-inline。别硬记“大屏/小屏”，盯住你的设计规范里定义的临界宽度就行。