必须用 .btn-group 容器包裹按钮才能实现边框重叠——Bootstrap 依赖该语义类触发 CSS 边框与圆角清除逻辑，否则按钮各自渲染导致双线、错位圆角等问题。
直接用 .btn-group 容器包裹按钮，边框重叠就自动解决了——这不是 CSS 优化问题，而是语义缺失导致的视觉错误。
为什么按钮边框没“重叠”，反而出现双线或错位圆角
你看到的“边框重叠失效”，本质是没用 .btn-group 容器。Bootstrap 的边框合并逻辑只作用于 .btn-group > .btn 这个选择器路径下：首按钮保留左 border-radius 和左 border，尾按钮保留右 border-radius 和右 border，中间按钮左右 border 和圆角全部被 CSS 清除。
常见错误现象包括：
- 两个
<button class="btn">并排写，中间有明显缝隙、左右都有圆角 - 手动加
margin-left: -1px模拟重叠，结果在缩放、高 DPI 或 Safari 下错位 - 按钮组嵌在
.input-group或.btn-toolbar里，外层容器样式覆盖了边框清除规则
.btn-group 必须包裹，不能省略
Bootstrap 4 的按钮组行为完全依赖容器级语义。没有 .btn-group，CSS 就找不到作用目标，.btn 元素只是普通行内块，各自渲染自己的边框和圆角。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 结构必须是：
<div class="btn-group"><button class="btn">A</button><button class="btn">B</button></div> - 别用
display: flex手动模拟——它不处理圆角隐藏、禁用状态联动、focus outline 对齐等细节 - 如果用了
.btn-group-vertical，确保没同时加.btn-group（类名冲突会导致首尾按钮直角化） - 动态插入按钮后，记得重新初始化 Bootstrap 的 button 插件（如需 toggle/checkbox 行为）
响应式边框重叠怎么保持一致
Bootstrap 4 默认只在水平方向做边框合并；一旦用 flex-sm-column 切换到垂直布局，原生 .btn-group 不会自动适配——它的垂直变体是独立的 .btn-group-vertical 类。
所以真正要做的不是“优化边框”，而是选对容器：
- 纯小屏垂直 + 大屏水平：用
<div class="btn-group flex-sm-column flex-md-row">，不用.btn-group-vertical - 需要垂直堆叠且保留边框合并：必须用
.btn-group-vertical，而非仅靠flex-direction: column - 混用场景（如工具栏中一组水平 + 一组垂直）：用
.btn-toolbar包裹多个独立的.btn-group或.btn-group-vertical
自定义边框样式时最容易翻车的地方
如果你改了 $border-radius 或 $btn-border-width Sass 变量，但发现按钮组首尾圆角不一致，大概率是因为：
- 只覆盖了
.btn的border-radius，没同步更新.btn-group > .btn:not(:first-child)和:not(:last-child)的清除逻辑 - 给
.btn加了box-shadow，而.btn-group的边框清除规则不处理 shadow，导致视觉上仍有“双线感” - 在
.input-group内部套.btn-group，而.input-group自带的border-radius重置逻辑干扰了继承
最稳的做法是：不动边框合并逻辑本身，只通过 Sass 变量统一源头；若必须定制，优先改 _buttons.scss 里 .btn-group 相关的嵌套规则，而不是零散覆盖。
