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 中，仅视觉上按断点隐藏。
-
visually-hidden是 Bootstrap 5 内置辅助类，用于隐藏内容但保留在可访问树中 - 把按钮文字包在
<span class="visually-hidden d-md-inline-block">文字</span>里不行——visually-hidden本身已设position: absolute; width: 1px，再叠加d-md-inline-block会冲突 - 正确组合是：
<span class="d-none d-md-inline-block">文字</span>—— 它在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 文件里没这个规则了。
- Bootstrap 4：
sr-only+sr-only-focusable - Bootstrap 5：
visually-hidden+visually-hidden-focusable - 如果混用（比如复制旧文档代码），按钮文字在小屏可能意外残留或彻底消失，取决于 CSS 加载顺序和覆盖情况
Icon 字体或 SVG 图标怎么选？
无论用 Bootstrap Icons、Font Awesome 还是内联 SVG，只要 icon 是独立元素（<i></i> 或 <svg></svg>），都适用上面的 span 包裹逻辑。但要注意两点：
- SVG 如果设了
aria-hidden="true"，必须确保文字部分仍可被读取——所以文字不能塞进 SVG 的<title></title>或靠aria-label补，那样小屏下 icon 没文字、大屏下又没冗余说明，反而更难懂 - 用
<i></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 + 文字并存的拥挤状态。
- 查清你项目的折叠断点：看
$grid-breakpointsSass 变量或检查浏览器开发者工具中 navbar 的@media查询 - 不要硬编码像素值（如
d-none d-[min-width:850px]-inline-block）——Bootstrap 不支持这种写法，得自己写媒体查询或用 Sass 扩展 - 如果多个按钮要统一行为，建议抽成自定义类，比如
btn-text-on-lg，内部复用d-none d-lg-inline-block
最易忽略的是断点与实际 UI 折叠逻辑不一致，导致小屏按钮变宽、换行或遮挡图标——这不是代码写错了，而是没对齐设计系统的响应阈值。
