可通过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 切换可见性，语义和可访问性不受影响。
- 给文字容器加
d-none d-md-inline：小屏（md以下）完全隐藏，md及以上显示为内联元素 - 给图标容器加
d-inline d-md-none：小屏显示，md及以上隐藏 - 图标需包裹在
<span></span>或<i></i>中，并添加rounded-circle bg-primary text-white d-flex align-items-center justify-content-center实现居中圆形背景 - 必须设置固定宽高（如
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>
避免常见错误：图标变形、点击区域过小、可访问性缺失
实际项目里最容易出问题的是视觉和交互一致性——不是“写出来就行”，而是“点得准、看得清、读得懂”。
- 没设
width和height：rounded-circle在无尺寸约束时会塌缩成一条线，尤其在 Flex 容器里 - 图标未垂直水平居中：漏掉
align-items-center justify-content-center，导致图标偏上或偏左 - 小屏下按钮太窄：默认
btn有 padding，但图标区域可能被压缩，建议加px-3 py-2确保最小触控面积 - 屏幕阅读器无法识别图标意图：必须加
aria-label，且值应与隐藏的文字一致，例如aria-label="编辑用户"
如果用 Bootstrap 4，断点类名略有差异
Bootstrap 4 的响应式类名以 hidden- / visible- 开头（已废弃），推荐统一用 d-none d-sm-inline 这套新语法（BS4.4+ 也支持）。若项目锁定旧版本，可用：
-
d-none d-sm-inline替代hidden-xs（BS4 原生支持） - 不要用
visible-xs-block等已移除类，它们在 BS4.2+ 中不再生效 - BS4 默认不带
bi图标，需自行引入 Bootstrap Icons 或 Font Awesome，并确保 CDN 或本地路径正确
圆形图标的实现逻辑不变，但 BS4 的 flex 工具类命名略有不同（如 d-flex justify-content-center align-items-center 同样可用）。
真正麻烦的不是写几行 class，而是确保所有断点切换时，按钮高度一致、图标对齐不跳动、触摸目标不小于 44px —— 这些细节往往要靠浏览器调试器反复测。
