Bootstrap如何让按钮在大屏显示文字说明小屏只显示一个圆形图标

可通过Bootstrap响应式工具类配合自定义CSS实现大屏显示文字、小屏仅显示圆形图标：文字容器用d-none d-md-inline，图标容器用d-inline d-md-none并添加rounded-circle、固定宽高及flex居中；需设置aria-label保障可访问性。

按钮文字与图标在不同屏幕尺寸下的显示控制

Bootstrap 本身没有内置“大屏显示文字、小屏只显示圆形图标”的一键开关，但可以通过响应式工具类 + 自定义 CSS 配合实现。核心思路是：用 visually-hidden（或 d-none）隐藏文字，再用 d-{breakpoint}-inline 控制图标可见性；圆形图标需额外加 rounded-circle 和尺寸约束。

使用 Bootstrap 5 的 d-{xs,sm,md,lg,xl,xxl}-* 类控制显隐

Bootstrap 5 提供了按断点控制显示/隐藏的工具类，这是最直接的方式。注意：默认文字和图标都存在 DOM 中，仅靠 CSS 切换可见性，语义和可访问性不受影响。

1. 给文字容器加 d-none d-md-inline：小屏（md 以下）完全隐藏，md 及以上显示为内联元素
2. 给图标容器加 d-inline d-md-none：小屏显示，md 及以上隐藏
3. 图标需包裹在 或 中，并添加 rounded-circle bg-primary text-white d-flex align-items-center justify-content-center 实现居中圆形背景
4. 必须设置固定宽高（如 width: 2rem; height: 2rem;），否则 rounded-circle 不生效

<button type="button" class="btn btn-primary"><span class="d-none d-md-inline">编辑用户</span><span class="d-inline d-md-none rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width:2rem;height:2rem;"><i class="bi bi-pencil"></i></span></button>

避免常见错误：图标变形、点击区域过小、可访问性缺失

实际项目里最容易出问题的是视觉和交互一致性——不是“写出来就行”，而是“点得准、看得清、读得懂”。

1. 没设 width 和 height：rounded-circle 在无尺寸约束时会塌缩成一条线，尤其在 Flex 容器里
2. 图标未垂直水平居中：漏掉 align-items-center justify-content-center，导致图标偏上或偏左
3. 小屏下按钮太窄：默认 btn 有 padding，但图标区域可能被压缩，建议加 px-3 py-2 确保最小触控面积
4. 屏幕阅读器无法识别图标意图：必须加 aria-label，且值应与隐藏的文字一致，例如 aria-label="编辑用户"

如果用 Bootstrap 4，断点类名略有差异

Bootstrap 4 的响应式类名以 hidden- / visible- 开头（已废弃），推荐统一用 d-none d-sm-inline 这套新语法（BS4.4+ 也支持）。若项目锁定旧版本，可用：

1. d-none d-sm-inline 替代 hidden-xs（BS4 原生支持）
2. 不要用 visible-xs-block 等已移除类，它们在 BS4.2+ 中不再生效
3. BS4 默认不带 bi 图标，需自行引入 Bootstrap Icons 或 Font Awesome，并确保 CDN 或本地路径正确

圆形图标的实现逻辑不变，但 BS4 的 flex 工具类命名略有不同（如 d-flex justify-content-center align-items-center 同样可用）。

真正麻烦的不是写几行 class，而是确保所有断点切换时，按钮高度一致、图标对齐不跳动、触摸目标不小于 44px —— 这些细节往往要靠浏览器调试器反复测。