Bootstrap图标与文字不对齐主因是vertical-align和margin折叠，应优先用me-2+align-middle控制SVG间距，或用d-flex gap-2布局图标组。
Bootstrap 本身不提供图标（bootstrap-icons 是独立仓库），所谓“Bootstrap 图标间距”，实际是调用 <i> 或 <svg> 元素后，与相邻文本、按钮或其他内联元素之间的视觉空隙问题。直接加 margin 很容易错位或被折叠，得看容器上下文和显示模式。
为什么给 <i class="bi bi-x"> 加 ms-2 没反应？
常见现象：在按钮里塞一个 Bootstrap Icons 的 <i>，想用 ms-2 拉开和文字距离，结果没变化，甚至图标下沉。
-
<i>默认是display: inline，ms-2生效但受行高、垂直对齐影响；如果父容器是btn（display: inline-flex），ms-2会作用，但可能被 flex 子项的align-items: center拉平导致“看不见” - 更大概率是 margin 折叠：父元素（比如
<button>）没有 border 或 padding，子<i>的mt-*/mb-*会穿出到外层 - 图标字体（如早期用
bi字体）实际是文字节点，line-height和vertical-align比margin更关键
<svg> 图标和文字之间加间距的可靠写法
Bootstrap Icons 官方推荐用 SVG 引入（CDN 或本地 <svg> 标签），此时控制间距更可控：
- 优先用
me-2（不是mr-2）——支持 RTL，且 SVG 默认display: inline-block，me-2稳定生效 - 若 SVG 在
btn内，加align-middle防止基线偏移：<svg class="bi me-2 align-middle" ...> - 避免对
<svg>单独设margin-top：它可能触发父 flex 容器重新计算交叉轴，导致整体高度跳变 - 需要响应式间距？直接上
me-md-3，比手写@media更少冲突（Bootstrap 的me-*类带!important，覆盖普通 CSS 规则）
图标作为按钮独立元素时，gap 比 margin 更干净
当一组图标并排（比如工具栏、操作按钮组），别给每个 <i> 或 <svg> 加 me-2，容易漏掉第一个或最后一个：
- 把它们包进
<div class="d-flex gap-2">—— Bootstrap 5.3+ 原生支持，gap不干扰边框、不折叠、不依赖 display 类型 - 如果必须兼容旧版 Bootstrap（<div class="d-flex"><svg></svg><svg></svg></div> + 自定义类：
.icon-group > *:not(:first-child) { margin-left: 0.5rem; } - 注意：
gap对inline元素无效，所以确保父容器是flex或grid；<span>包图标再加d-flex会破坏行内流，慎用
真正麻烦的不是“怎么加间距”，而是加完之后在不同断点下是否还对齐、SVG 是否缩放失真、RTL 下图标顺序是否反了——这些细节在开发时容易忽略，但上线后用户一眼就能感知。
