html本身没有“无缝拼接按钮”的语法，所谓无缝本质是视觉连贯+边框/圆角协同控制+状态同步；直接并排button会因独立边框叠加和圆角错位而露白边或双线，btn-group通过分层圆角、边框消重及role="group"等实现真正无缝。
HTML 本身没有“无缝拼接按钮”的语法，所谓无缝，本质是视觉连贯 + 边框/圆角协同控制 + 状态同步，不是把两个 button 粘成一个 DOM 节点。
为什么直接并排两个 button 会露白边或双线？
浏览器默认给每个 button 渲染独立边框和圆角，相邻时左右边框叠加、圆角错位，就会出现“缝隙感”或“粗边线”。这不是 bug，是原生行为——每个按钮都当自己是独立控件。
- 默认
border是实线且带宽度（如 1px），两个按钮紧挨着，就变成 2px 宽的中间线 -
border-radius若没分层设置，第一个按钮右圆角 + 第二个按钮左圆角，视觉上就是“断开”的弧度 - 哪怕用了
display: flex，若没统一处理边框合并逻辑，依然会看到冗余边框
用 btn-group 容器实现真正无缝的关键参数
Bootstrap 的 btn-group 是经过大量兼容性验证的方案，它不只靠 flex 布局，更关键的是内置了边框消重和圆角分层规则：
- 容器必须加
role="group"和aria-label，否则屏幕阅读器无法识别逻辑组合 - 首按钮设
border-top-left-radius和border-bottom-left-radius - 尾按钮设
border-top-right-radius和border-bottom-right-radius - 中间所有按钮设
border-radius: 0，且margin: 0+border: 1px solid transparent（防抗锯齿偏移） - 禁用状态不能只写
disabled在容器上——要批量操作子按钮，或用 CSS 类模拟视觉灰化
响应式换行时按钮组“断开”的真实原因
btn-group 默认不换行，这是设计使然，不是缺陷。它面向工具栏类窄区域场景；一旦父容器变窄，按钮被压缩甚至重叠，说明你该切换布局模式了。
- 小屏下想垂直堆叠？用
btn-group-vertical替代，别硬撑 flex 换行 - 用
flex-wrap: wrap强制换行会导致按钮高度不一致、间隙不可控，且失去边框合并效果 - 移动端热区不足（
min-width: 44px; min-height: 44px）比“是否换行”更容易导致点击失败
真正容易被忽略的，不是怎么让按钮“看起来连在一起”，而是确保它们在键盘导航、禁用反馈、触控热区、屏幕阅读器播报这四个维度上，始终表现得像一个整体——否则再光滑的视觉衔接，也掩盖不了交互断裂的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
