Bootstrap按钮组边框重叠是设计行为而非bug，通过清除内部按钮圆角并用负边距或border合并实现无缝拼接；错误添加margin-left会破坏该机制导致错位或换行，应改用gap或仅对非首项设margin。
Bootstrap按钮组边框重叠是设计行为，不是bug
这不是你漏写了border-radius或写错了CSS，而是Bootstrap主动清除了内部按钮的左右圆角，并用margin-right: -1px（Bootstrap 4）或border合并逻辑（Bootstrap 5+）来实现“无缝拼接”。它本意就是让多个按钮视觉上连成一条线，所以边框重叠是预期效果。
为什么加margin-left会让按钮错位甚至换行
直接给.btn加margin-left会破坏Bootstrap内置的负边距机制：margin-right: -1px被抵消后，按钮间实际间距变成margin-left + 1px，导致双倍空隙、对齐偏移，小屏下还容易触发flex-wrap换行。
- 别写
.btn-group .btn { margin-left: 0.5rem; } - 正确做法是作用于容器：
.btn-group { gap: 0.5rem; }（Bootstrap 5+） - 若必须用margin，只对非首项生效：
.btn-group > .btn:not(:first-child) { margin-left: 0.5rem; margin-right: 0; }
垂直按钮组（.btn-group-vertical）边框异常怎么调
垂直排列时，.btn-group-vertical默认用flex-direction: column和margin-bottom: -1px合并上下边框。如果你额外加了gap或margin-bottom，反而会撑开间隙、暴露重叠边框。
- 优先删掉自定义
margin-bottom或gap，让它走原生逻辑 - 需要微调间距？改
.btn-group-vertical > .btn:not(:last-child) { margin-bottom: 4px; } - 确认子元素全是
<button class="btn"></button>，混用<input type="button">会导致边框不参与合并
嵌在.input-group或.form-floating里边框被裁切
这些父容器本身有overflow: hidden、z-index重置和border-radius覆盖逻辑，会把按钮组的外扩边框（尤其是首尾圆角）直接剪掉。
立即学习“前端免费学习笔记（深入）”；
- 给
.btn-group加flex-shrink: 0防止被压缩 - 把部分按钮换成
.input-group-text，减少flex项数量 - 统一按钮
height并加align-items: center，避免.form-floating里label定位漂移
gap可能悄悄退化成margin模式——这时computed styles里的display值才是唯一可信的判断依据。 
