Bootstrap 5 中 btn-group 图标对齐不居中因行高与基线不一致，应加 align-middle 类；图标尺寸不随按钮缩放需设 font-size: inherit；纯图标按钮须加 visually-hidden 文字提升可访问性；Safari 间隙问题可通过删空白或 font-size: 0 解决。
Bootstrap 5 中 btn-group 内图标对齐不居中？
默认情况下，btn-group 里塞 <i> 或 <svg> 图标后，文字和图标上下偏移明显——不是图标下沉就是文字上浮。这是因为按钮内行高（line-height）和图标自身基线（baseline）不一致，且 bootstrap 5 移除了对 .btn-group .btn i 的自动垂直对齐逻辑。
实操建议：
- 给图标加
align-middle类（Bootstrap 5 内置），它会把图标基线拉到父容器文本中线位置 - 若用 SVG，确保没设
vertical-align: bottom或其他干扰样式 - 避免在按钮内嵌套
<span>包图标再手动调margin-top，容易破坏响应式缩放
<div class="btn-group"> <button class="btn btn-outline-primary"><i class="bi bi-plus align-middle me-1"></i>新增</button> <button class="btn btn-outline-primary"><i class="bi bi-pencil align-middle me-1"></i>编辑</button> </div>
多个按钮共用同一图标尺寸，但大小不一致？
常见于混合使用 btn-sm、btn-lg 和默认尺寸按钮时：图标未随按钮缩放，导致小按钮里图标撑出、大按钮里图标过小。
原因在于 Bootstrap 的图标类（如 bi）本身是固定宽高（1em），不响应按钮的 font-size 变化。
实操建议：
- 统一按钮尺寸，或统一用
btn-sm+ 手动加大图标：style="font-size: 1.2rem;" - 更稳妥的做法：用 CSS 自定义图标尺寸变量，例如：
.btn svg, .btn i { font-size: inherit; }，让图标继承按钮当前字号 - 慎用
transform: scale()，会导致图标边缘发虚，尤其在高 DPI 屏幕上
按钮组内图标按钮点击反馈弱，视觉不明显？
纯图标按钮（如仅 <i class="bi bi-trash"></i>）在 btn-group 中缺乏文字锚点，用户难判断可点击区域，hover/active 状态也不够突出。
实操建议：
- 至少保留一个不可见但语义化的文字节点：
<span class="visually-hidden">删除</span>，兼顾无障碍和焦点识别 - 为图标按钮加
padding（如px-2），别依赖图标自身宽高作为点击热区 - 在
:active状态下加背景色微调（如bg-secondary）比只靠边框变化更可靠
<button class="btn btn-outline-danger px-2"> <i class="bi bi-trash align-middle"></i> <span class="visually-hidden">删除</span> </button>
自定义图标按钮组在 Safari 下出现水平间隙？
部分版本 Safari（尤其是 macOS 13+/iOS 16+）对 btn-group 内联元素间的空白符（换行、空格）渲染更敏感，导致按钮间意外出现 2–4px 缝隙，破坏“无缝”效果。
这不是 Bootstrap Bug，而是 HTML 解析行为差异。
实操建议：
- 删掉按钮标签之间的换行和空格，写成一行（牺牲可读性但最稳）
- 或给
btn-group加font-size: 0，再给每个.btn单独设回正常字号（如font-size: 1rem） - 避免用
float: left修复，会破坏 Flex 布局和响应式断点
真正麻烦的是图标与文字的 baseline 对齐在不同字体加载时机下会抖动——如果你用了 Web Font，得等 font-display: swap 切换完成后再触发一次重排，否则首屏图标可能错位一帧。
