优先用gap——.btn-group默认为flex布局，gap能避免margin折叠、空白字符干扰及选择器维护问题，响应式支持良好；ie等旧浏览器需回退至:not(:first-child) margin方案。
为什么 .btn-group 里的按钮外边距会“消失”或“错位”
不是你写错了 CSS，而是浏览器对 inline-block 元素（Bootstrap 4 默认的 .btn-group 渲染方式）自动在相邻元素间插入空白字符（换行、空格），这些空白被渲染为约 4px 的不可见间隙。更糟的是，当用 margin 手动控制间距时，相邻按钮的垂直 margin 可能发生 margin collapse，尤其在嵌套容器或 JS 动态操作后，导致上/下间距不一致。
.btn-group 在 Bootstrap 5+ 中该用 gap 还是 margin
优先用 gap——它专为 Flex/Grid 子项间距设计，不触发 margin collapse，语义清晰，响应式友好：
-
.btn-group默认已是display: flex，直接加gap-2或gap-md-3即生效 - 避免写
.btn-group .btn:not(:first-child) { margin-left: 0.5rem; }这类易漏、难维护的选择器 - 若项目需兼容 IE 或旧版 Safari（margin 方案，并确保父容器未被 JS 强制改为
inline-block - 检查 computed styles：如果
.btn的display显示为inline-block，说明 Bootstrap 4 的data-toggle="buttons"或自定义 JS 干扰了 flex 上下文，此时gap必然无效
响应式按钮间距怎么设才不翻车
别在媒体查询里重复写 margin，用 Bootstrap 内置断点间距类更稳：
-
gap-1（0.25rem）用于紧凑工具栏，gap-md-2（0.5rem）适配中屏以上，gap-lg-3（1rem）用于大屏表单操作区 - 多个断点类可共存：
class="btn-group gap-1 gap-sm-2 gap-lg-3"，CSS 层叠规则保证高断点覆盖低断点 - 自定义间距值？改 Sass 变量
$spacers，而不是覆盖.btn的 margin——后者会污染全局，且在.btn-toolbar等嵌套结构中失效
按钮组嵌在 .input-group 或 .form-floating 里间距异常怎么办
这是最常被忽略的场景：父容器本身有 padding 或 position 限制，会挤压按钮实际渲染空间：
-
.input-group默认对.btn做了border-radius重置和z-index调整，若额外加gap，可能导致右侧按钮圆角被裁切 - 解决方法：给
.btn-group加flex-shrink: 0防止被压缩；或改用.input-group-text替代部分按钮，减少 flex 项数量 -
.form-floating内部 label 使用position: absolute，若按钮组高度不一致，会干扰 label 定位——此时应统一按钮height或用align-items: center对齐
gap 看似简单，但一旦按钮被 JS 动态插入、或与其他组件（如 vue-bootstrap 的封装组件）混用，就容易退化回 margin 模式。这时候 inspect 元素看 computed display 和 gap 是否生效，比猜更管用。
