Bootstrap按钮组无缝拼接靠负边距实现，直接给按钮加margin会因父级-1px抵消而失效；应覆盖.btn-group > .btn + .btn的margin-left/top并重置:first-child的外边距。
Bootstrap按钮组默认就是无缝拼接的，不需要额外“注入”CSS——所谓“无缝”，本质是靠 .btn-group 内部的负边距机制实现的，强行加 margin 或 padding 反而会破坏它。
为什么直接给按钮加 margin 会失效？
因为 .btn-group 的 CSS 规则里明确写了：.btn-group .btn + .btn 的 margin-left: -1px。你给子按钮加 margin-left: 4px，实际效果是 4px + (-1px) = 3px，但这个计算会被父容器的布局逻辑覆盖，视觉上依然“贴死”。更麻烦的是，首按钮的 margin-left 没被重置，整个组会右偏。
- 错误做法：
<button class="btn">A</button><button class="btn mx-2">B</button>→ 间距不可控，且在.btn-group容器内被抵消 - 正确思路：要改间距，必须覆盖
.btn-group .btn + .btn的margin-left值，并同步重置首按钮的margin-left: 0 - 注意尺寸类影响：
.btn-group-sm和.btn-group-lg下，原始负边距仍是-1px，但按钮高度变了，所以自定义时建议用rem或em单位保持比例
如何安全覆盖默认负边距？
必须提高选择器权重，否则你的样式会被 Bootstrap 默认规则覆盖。推荐写法：
.btn-group > .btn + .btn {
margin-left: 0.25rem; /* 替换 -1px */
}
.btn-group > .btn:first-child {
margin-left: 0;
}- 不要只写
.btn + .btn—— 权重不够，会被.btn-group .btn + .btn覆盖 - 必须补
:first-child重置，否则第一个按钮左侧多出 0.25rem 空隙，整体右移 - 如果用了
.btn-group-vertical，对应要改.btn-group-vertical > .btn + .btn的margin-top
垂直按钮组（.btn-group-vertical）怎么调间距？
垂直组的拼接逻辑和水平组对称，但容易被忽略：它用的是 margin-top: -1px，不是 margin-left。直接套用水平组的 CSS 会完全无效。
立即学习“前端免费学习笔记（深入）”；
- 覆盖规则应为：
.btn-group-vertical > .btn + .btn { margin-top: 0.25rem; } - 同样要重置首按钮：
.btn-group-vertical > .btn:first-child { margin-top: 0; } - 切勿同时写
class="btn-group btn-group-vertical"—— 两个类共存会导致圆角异常（顶部/底部按钮本该圆角，可能变直角） - 垂直组不支持嵌套
.btn-group，需改用role="toolbar"容器替代
真正难的不是写几行 CSS，而是理解 Bootstrap 按钮组的拼接是“主动取消间隙”，而非“被动留白”。一旦误以为它是靠 padding 或 border 实现的，所有调试都会南辕北辙。
