Bootstrap按钮实现文字左对齐图标右对齐的关键是HTML中先写文字后写图标，并引入Bootstrap Icons CSS；图标垂直居中用align-middle类，响应式隐藏用d-{breakpoint}-none类。
按钮内文字左对齐、图标右对齐的常见写法
bootstrap 默认按钮不强制图文方向，但通过合理组合 btn 类和内联元素顺序，能自然实现「文字在左、图标在右」。关键不是靠 css 覆盖，而是利用 bootstrap 的默认流式布局逻辑：html 中先写文字、后写图标，再配合合适的图标类（如 bi 或 fa），就能达成目标。
- 用
—— 文字在前、在后，图标自动紧贴右侧 - 避免把图标放在文字前面，否则会变成「图标左、文字右」
- 如果用了
text-start或justify-content-start等类，可能干扰默认表现，一般不需要额外加
使用 Bootstrap Icons 时需确认 CDN 或本地加载已生效
很多用户写了 却看不到图标，根本原因是图标字体没加载。Bootstrap Icons 不随 Bootstrap CSS 自动引入，必须手动添加。
- 最简方式：在
中加入官方 CDN：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
- 检查浏览器开发者工具的 Network 标签页，确认
bootstrap-icons.css返回 200 - 别用
bi-xxx拼错，比如bi-check2是有效名，但bi-check-2就无效
图标与文字垂直居中对不齐？优先查 line-height 和 font-size
文字和图标上下偏移，通常不是 Bootstrap 的 bug，而是字体度量差异导致的视觉错位。图标字体（如 Bootstrap Icons）默认按 1em 渲染，但按钮的 line-height 可能被其他样式干扰。
- 给图标加
align-middle类（Bootstrap 5 内置）： - 避免给按钮设固定
height，改用padding控制尺寸，更利于内联元素对齐 - 如果用了自定义字体或重置了
font-size，需同步调整图标的font-size，例如加style="font-size: 1rem;"
响应式场景下图标要不要隐藏？用 d-{breakpoint}-none 更可控
小屏时按钮空间紧张，常需要隐藏图标只留文字。Bootstrap 的响应式显示类比手写媒体查询更稳妥，且语义清晰。
- 隐藏图标仅在 xs 下：
- 不要用
visually-hidden，它只是视觉隐藏，图标仍占 DOM 位置，可能影响点击热区 - 如果按钮文字本身也过长，建议搭配
text-truncate+flex-nowrap防止换行挤压图标
实际项目里最容易被忽略的是图标加载状态和响应式类的断点匹配——比如用了 d-md-none 却在 sm 屏测试，就永远看不到效果。先确保图标能显示，再调对齐，最后做响应式收口。
