按钮错位因 Bootstrap 的 margin-right: -1px 负边距被 margin-left 破坏；正确做法是用 .btn-group { gap: 8px; } 或仅对非首按钮设 margin-left 并重置 margin-right。
用 margin-left 给 Bootstrap 按钮组加间距，为什么按钮会错位？
因为 Bootstrap 默认给 .btn-group 内的按钮设置了 margin-right: -1px（用于消除边框重叠），直接在子按钮上加 margin-left 会破坏这个负边距逻辑，导致按钮之间出现双倍缝隙、对齐偏移，甚至换行。
- 别单独给每个
.btn加margin-left，尤其别写成.btn-group .btn { margin-left: 8px; } - 正确做法是「包裹一层再控制」：把按钮组放进自定义容器，用
gap或外层margin控制间距 - 如果必须用 margin，只对除第一个按钮外的其余按钮加
margin-left，且需重置其margin-right，例如：.btn-group .btn:not(:first-child) { margin-left: 8px; margin-right: 0; }
Bootstrap 5+ 推荐方案：用 gap 替代 margin
gap 是 Flex/Grid 布局原生属性，能干净地控制子项间距，不干扰边框合并逻辑，兼容性在现代项目中足够好（Chrome 84+/Firefox 63+/Safari 14.1+）。
- 确保按钮组使用
display: flex（Bootstrap 5 的.btn-group默认就是 flex） - 直接在
.btn-group上设gap：.btn-group { gap: 8px; } - 若按钮组嵌套在
.btn-toolbar或响应式布局里，gap依然生效，无需额外 hack - 注意：IE 完全不支持
gap，如需兼容 IE，必须回退到 margin 方案并配合:not(:first-child)
为什么 btn-group 的 data-toggle="buttons" 会让 gap 失效？
这是 Bootstrap 4 的旧 JS 插件行为——它会给按钮添加 position: relative 和隐藏的 input，有时会触发浏览器对 flex 子项的渲染降级，导致 gap 被忽略（尤其在某些 Safari 版本或嵌套 flex 场景下）。
- 优先升级到 Bootstrap 5+，移除
data-toggle="buttons"，改用原生type="radio"/type="checkbox"+ CSS 控制样式 - 若必须保留 Bootstrap 4 的 toggle 功能，加一句
.btn-group { display: inline-flex; }强制保持 flex 上下文 - 检查 computed styles：如果发现按钮的
display变成了inline-block或被 JS 覆盖，gap必然无效
响应式间距怎么处理？别用媒体查询硬写 margin
用 gap 配合 Bootstrap 的断点工具类更稳，比如 gap-2（0.5rem）、gap-md-3（1rem on md+），它们本质是 CSS 自定义属性 + 媒体查询封装，比手写 @media 更少出错。
立即学习“前端免费学习笔记（深入）”；
- 直接写：
<div class="btn-group gap-2 gap-md-3">...</div>
- 自定义断点间距时，扩展 Bootstrap 的
$spacersSass 变量，而不是覆盖.btn-group > .btn的 margin - 避免在同一个按钮组上混用
gap和手动margin，CSS 层叠容易互相覆盖，调试困难
<button> 和 <a class="btn"> 混用，它们的默认 vertical-align 和 line-height 不一致，会导致即使 gap 正确，视觉上也像“没对齐”。这种情况得统一标签语义，或者强制 align-items: center。 
