最推荐用gap控制按钮组间距：bootstrap 5的.btn-group默认为flex布局，直接设gap可避免margin冲突、保持边框合并，响应式可用gap-2或gap-md-3类，混用margin会导致间距异常，ie需回退:not(:first-child)方案。
直接用 gap 控制按钮组间距最干净
Bootstrap 5 的 .btn-group 默认是 display: flex，天然支持 gap。这是目前最推荐的方式，不破坏边框合并逻辑，也不需要手动排除首项。
常见错误是给每个 .btn 单独加 margin-left，结果和 Bootstrap 原有的 margin-right: -1px 冲突，导致按钮错位、换行或双倍缝隙。
-
.btn-group { gap: 0.5rem; }—— 全局统一，语义清晰 - 响应式写法：
gap-2 gap-md-3，对应 Bootstrap 内置断点类，比手写@media更稳 - 若按钮组嵌套在
.btn-toolbar或卡片内，gap依然生效，无需额外 hack
gap 和 margin 混用会叠加出意料之外的间距
Bootstrap 5.3+ 的 .btn-group 默认没设 margin，但如果你项目里有自定义样式、或用了旧版迁移残留规则（比如手动写了 .btn-group .btn { margin-right: 0.25rem; }），就容易和 gap 叠加。
DevTools 的 layout 面板打开“show all margins”，一眼就能看到 .btn 实际渲染出的上下左右边距值——如果发现顶部/底部多出空隙，大概率是 gap + 未清理的 margin 共同作用的结果。
- 检查 computed styles 中
.btn的margin是否为0；不是的话，得定位来源并清掉 - 别依赖
!important去覆盖，优先用更具体的选择器重置，比如.btn-group > .btn { margin: 0; } -
gap是布局层控制，margin是元素层控制，混用等于两套逻辑同时跑，调试成本翻倍
需要兼容 IE？只能退回 :not(:first-child) + margin
IE 完全不支持 gap，哪怕你用 inline-flex 强制也无效。这时候必须用传统方案，但要注意细节。
错误写法：.btn-group .btn { margin-left: 0.5rem; } —— 首个按钮也会被影响，左边多出空隙，且破坏 margin-right: -1px 的边框合并。
- 正确写法：
.btn-group .btn:not(:first-child) { margin-left: 0.5rem; margin-right: 0; } - 如果按钮是动态插入的（比如 JS 渲染），
:not(:first-child)依然可靠；:nth-child(1)在某些 DOM 操作下可能失效 - 不要用
margin-right给所有按钮设负值去“抵消”，容易在缩放或高 DPI 下失准
Bootstrap 自带的间距工具类（如 mx-2）不适合按钮组内部
mx-2 这类工具类作用于单个元素，对按钮组来说是“治标不治本”。它会给每个按钮加左右外边距，但无法规避 margin-right: -1px 的干扰，而且响应式行为不可控——比如 mx-md-3 在小屏下依然生效，可能导致按钮挤出容器。
更隐蔽的问题是：这些类会污染按钮自身的语义结构。一旦按钮被 JS 动态替换（比如加载中状态替换成 spinner-border），外边距规则还在，但子元素高度变了，视觉就错乱了。
- 工具类适合控制组件之间的间距（比如按钮组和上方标题的距离），不适合控制组件内部子项
- 想用工具类统一管理？封装成自定义类更安全，例如：
.btn-group-gap-sm { gap: 0.25rem; } - 别为了省几行 CSS，把布局逻辑散落在多个
mx-*里，后期改起来全是坑
data-bs-toggle="buttons" 这类旧 JS 插件——它可能悄悄把按钮变成 position: relative 或插入隐藏 input，导致 flex 上下文降级，gap 失效。遇到这种情况，先检查 computed styles 里的 display 值是不是还是 flex。
