Bootstrap如何让按钮在大屏显示文字在小屏只显示Icon

Bootstrap 5 中需用 d-none d-md-inline-block 组合实现“小屏仅图标、大屏显文字”，而非已废弃的 text-hide 或 sr-only；visually-hidden 仅用于纯视觉隐藏，不可与响应式类混用；图标须正确设置 aria 属性以保障无障碍。

Bootstrap 5 中用 visually-hidden 配合响应式类控制按钮文字显隐

直接结论：Bootstrap 5 没有内置“大屏显文字、小屏只显 icon”的专用类，但用 visually-hidden + 响应式显示类（如 d-none d-md-inline-block）组合就能干净实现，且语义正确、无障碍友好。

常见错误是用 text-hide（已废弃）或粗暴写 display: none，这会破坏屏幕阅读器可访问性。正确做法是让文字始终存在 DOM 中，仅视觉上按断点隐藏。

1. visually-hidden 是 Bootstrap 5 内置辅助类，用于隐藏内容但保留在可访问树中
2. 把按钮文字包在 文字 里不行——visually-hidden 本身已设 position: absolute; width: 1px，再叠加 d-md-inline-block 会冲突
3. 正确组合是：文字 —— 它在 xs/sm 下完全不渲染，在 md+ 下内联显示，对屏幕阅读器也自然可读（无额外隐藏）

示例：

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

为什么不用 sr-only？

sr-only 是 Bootstrap 4 的类名，Bootstrap 5 已统一替换为 visually-hidden。如果你项目还在用 Bootstrap 4，那确实该用 sr-only；但新项目或升级后继续写 sr-only 会失效——CSS 文件里没这个规则了。

1. Bootstrap 4：sr-only + sr-only-focusable
2. Bootstrap 5：visually-hidden + visually-hidden-focusable
3. 如果混用（比如复制旧文档代码），按钮文字在小屏可能意外残留或彻底消失，取决于 CSS 加载顺序和覆盖情况

Icon 字体或 SVG 图标怎么选？

无论用 Bootstrap Icons、Font Awesome 还是内联 SVG，只要 icon 是独立元素（<i> 或 <svg>），都适用上面的 span 包裹逻辑。但要注意两点：

1. SVG 如果设了 aria-hidden="true"，必须确保文字部分仍可被读取——所以文字不能塞进 SVG 的 <title> 或靠 aria-label 补，那样小屏下 icon 没文字、大屏下又没冗余说明，反而更难懂
2. 用 <i> 标签时，别漏掉 role="img" 和 aria-hidden="true"（如 <i class="bi bi-download" role="img" aria-hidden="true"></i>），否则屏幕阅读器可能把 icon 当作文本字符朗读

自定义断点或需要更精细控制？

默认 d-md-inline-block 在 768px（md）起生效。如果你的导航栏折叠点是 992px（lg），就得改成 d-none d-lg-inline-block，否则在平板横屏（~800–900px）会出现 icon + 文字并存的拥挤状态。

1. 查清你项目的折叠断点：看 $grid-breakpoints Sass 变量或检查浏览器开发者工具中 navbar 的 @media 查询
2. 不要硬编码像素值（如 d-none d-[min-width:850px]-inline-block）——Bootstrap 不支持这种写法，得自己写媒体查询或用 Sass 扩展
3. 如果多个按钮要统一行为，建议抽成自定义类，比如 btn-text-on-lg，内部复用 d-none d-lg-inline-block

最易忽略的是断点与实际 UI 折叠逻辑不一致，导致小屏按钮变宽、换行或遮挡图标——这不是代码写错了，而是没对齐设计系统的响应阈值。