Bootstrap如何让按钮在大屏显示文字小屏只显示圆点图标

按钮文字与图标响应式切换需用d-md-inline d-sm-none和d-sm-inline d-md-none分别控制大屏文字与小屏圆点，避免语义丢失和无障碍问题，推荐使用•实体并确保触控区域≥44px。

按钮文字与图标响应式切换的关键是隐藏/显示控制

Bootstrap 本身不提供“大屏文字 + 小屏圆点图标”这种组合的内置类，必须手动组合 visually-hidden、d-none 和响应式断点类来实现。直接用 d-md-block d-sm-none 控制文字，再用 d-sm-block d-md-none 控制图标，是最稳妥的做法。

常见错误是只写 d-sm-none 忘了补 d-md-block，导致小屏图标也不显示；或者误用 sr-only（已废弃），在 Bootstrap 5+ 中应改用 visually-hidden。

1. visually-hidden 用于屏幕阅读器可读但视觉隐藏的文字（如“删除”按钮旁的辅助文本）
2. 纯视觉切换用 d-{breakpoint}-*：比如 d-md-inline d-sm-none 表示“中屏及以上显示，小屏隐藏”
3. 圆点图标建议用 SVG 或 •（HTML 实体），避免依赖字体图标加载失败导致空白

具体 HTML 结构怎么写

把文字和圆点放在同一按钮内，用两个 span 分别包裹，并打上对应响应式类：

<button type="button" class="btn btn-primary"><span class="d-md-inline d-sm-none">编辑</span><span class="d-sm-inline d-md-none">&#8226;</span></button>

注意：d-sm-inline 比 d-sm-block 更合适，避免圆点独占一行；• 是实心圆点 Unicode，无需额外资源，兼容性好。

1. 不要用 font-size 或 transform 强行缩放文字来“模拟”小屏图标——语义丢失且无障碍不友好
2. 如果要用 SVG 图标，确保 width/height 设为固定值（如 1em），否则小屏下可能被压缩变形
3. 测试时务必在真实手机尺寸（375px 宽）下验证，Chrome DevTools 的 “Responsive” 模式要选 iPhone SE 或自定义宽度，不能只看 xs 断点预设

为什么不用 Bootstrap 的 icon-only 类或第三方插件

Bootstrap 最新没有 icon-only 响应式工具类；社区插件（如 bootstrap-icons 的 bi-dots）默认不带响应式逻辑，仍需手动加 d-sm-* d-md-* 类控制显隐。

硬套插件反而增加 bundle 大小和维护成本——一个圆点，• 三个字符足矣。

1. 第三方图标库在小屏加载慢时会出现“文字闪一下再变圆点”的情况，纯 HTML 实体无此问题
2. 若项目已用 Font Awesome，可用 <i class="fa-solid fa-circle d-sm-inline d-md-none"></i>，但要确认其 fa-circle 在小字号下仍清晰（某些版本默认尺寸偏大）
3. 切忌用 title 属性替代可见文字——它不是可点击内容，也不被所有屏幕阅读器稳定支持

移动端点击区域太小怎么办

纯圆点图标默认尺寸小，容易点不准。必须保证触控目标至少 44px × 44px（苹果人机指南推荐最小值）。

1. 给按钮加 py-2 px-3 等内边距，而不是只放大圆点本身
2. 避免用 font-size: 0.5rem 缩小圆点再靠 padding 填充——会导致高 DPI 屏幕下模糊
3. 如果按钮是工具栏中密集排列，建议加 me-1 保持间距，防止误触相邻项

真正麻烦的不是怎么写这个按钮，而是后续所有同类按钮都要保持一致的断点逻辑和触控体验。一旦漏掉某处的 d-md-block 或没测真机点击热区，用户就会卡在那个圆点上反复点不动。