ButtonGroup默认间距靠margin-right: -1px控制：Bootstrap 5的.btn-group通过该负边距实现按钮边框合并、视觉无缝拼接，而非padding或gap；直接修改.btn的margin会破坏此逻辑，导致错位或双边框。
ButtonGroup默认间距是靠什么控制的？
Bootstrap 5 的 .btn-group 默认用 margin-right: -1px 实现按钮紧贴（消除边框重叠），而不是靠 padding 或 gap。这意味着：按钮视觉上“无缝拼接”，但实际每个 .btn 仍自带 border，且最右侧按钮的右 margin 被抵消——所以你直接给 .btn 加 margin-right 会破坏这个负边距逻辑，导致间隙错乱或双层边框。
想加间距，为什么不能直接改 .btn 的 margin？
直接在 .btn 上设 margin-right: 4px 会和 .btn-group 自带的 margin-right: -1px 叠加，结果不可控；更糟的是，最后一个按钮也会被加 margin，破坏对齐。正确做法是只干预非末尾按钮：
- 用
.btn-group > .btn:not(:last-child)选择器精准定位前几个按钮 - 把负边距抵消掉，再加正向间距，例如：
margin-right: 0; margin-right: 4px;（后者覆盖前者） - 或者更稳妥地重置整个逻辑：
.btn-group > .btn:not(:last-child) { margin-right: 4px; }，同时确保.btn-group自身没额外gap干扰（Bootstrap 5 默认不用gap）
用 gap 替代 margin 是否可行？
Bootstrap 5.3+ 开始，.btn-group 支持 display: flex + gap，但前提是你要显式启用它——默认仍是 inline-flex 且未设 gap。如果项目已升级到 Bootstrap 5.3+，可这样微调：
.btn-group {
gap: 4px;
}
.btn-group > .btn {
margin: 0; /* 清掉原有 margin-right: -1px 的影响 */
}注意：这会全局影响所有 .btn-group，且老版本 Bootstrap（5.0–5.2）不支持 gap 在 .btn-group 上生效，强行加无效。
立即学习“前端免费学习笔记（深入）”；
响应式场景下怎么避免间距错位？
按钮组在小屏堆叠时（比如加了 .btn-group-vertical），水平 gap 或 margin-right 会失效或产生多余空白。此时应：
- 优先用
.btn-group-vertical类，它内部用flex-direction: column和margin-bottom: -1px，微调用.btn-group-vertical > .btn:not(:last-child) { margin-bottom: 4px; } - 避免在媒体查询里重复覆盖
gap，因为gap在垂直方向同样生效，无需额外写margin-bottom - 检查是否意外触发了
.btn-group的响应式断点类（如flex-wrap），那会让按钮换行并让gap行为变得难预测
最常被忽略的点：改完记得清掉浏览器缓存里的旧 CSS，特别是用了构建工具时，CSS 模块化或提取可能让自定义样式没生效。
