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

作者：袖梨 2026-08-08

按钮文字与图标响应式切换需用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。

visually-hidden 用于屏幕阅读器可读但视觉隐藏的文字（如“删除”按钮旁的辅助文本）
纯视觉切换用 d-{breakpoint}-*：比如 d-md-inline d-sm-none 表示“中屏及以上显示，小屏隐藏”
圆点图标建议用 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，无需额外资源，兼容性好。

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

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

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

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

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