最稳妥的做法是使用 .btn-group 容器包裹按钮，因其通过 inline-flex 或 flex 自动对齐、消除间隙、统一基线并支持响应式控制；直接并列写两个 <button> 易导致换行、错位和间距失效。
用 .btn-group 最稳妥，别直接并列写两个 <button>
bootstrap 默认按钮是行内元素，但单独放两个 <button class="btn btn-primary"> 并不能保证它们严格“并排且对齐”——尤其在响应式断点下容易换行、间距失控、垂直居中偏移。正确做法是用容器收束：<div class="btn-group"> 包住它们。.btn-group 内部用 display: inline-flex（v5.3+）或 display: flex 管理子按钮，自动消除默认间隙、统一基线、支持尺寸控制。
常见错误现象：
- 两个按钮写在一行 HTML 里，但小屏幕时第二个按钮掉到下一行
- 按钮文字长度不同，导致高度不一致、视觉错位
- 加了
margin手动调间距，结果在缩放或不同字体渲染下失效
实操建议：
- 始终用
<div class="btn-group"><button>A</button><button>B</button></div>结构 - 需要等宽按钮？加
.btn-group > .btn的flex: 1，或直接用.btn-group > .btn:nth-child(1)单独设宽 - 想控制间距？优先用 Bootstrap 的
mx-1、mx-2等间距工具类，别碰margin原生值
垂直按钮组要加 .btn-group-vertical，别只改 CSS
如果需求是上下排列而非左右，并排显示的逻辑就反过来了——此时若只靠 flex-direction: column 或 display: block，会丢失 .btn-group 提供的边框合并、圆角统一、禁用状态联动等特性。
使用场景：
- 移动端菜单底部操作区（如“取消”在上、“确认”在下）
- 表单提交区域需明确操作顺序时
参数差异：
-
.btn-group：默认水平，按钮左右紧贴，左右边框只留一个 -
.btn-group-vertical：垂直堆叠，上下边框只留一个，圆角逻辑也按首尾按钮处理 - 混用风险：不要在一个
.btn-group里同时加.btn-group-vertical和手动flex-direction，CSS 优先级易冲突
下拉菜单里按钮和链接并排？关键在 d-inline-block + 移除 .dropdown-item
很多人卡在这里：把 <button class="dropdown-item"> 和 <a class="dropdown-item"> 放进下拉菜单，结果强制垂直堆叠——因为 .dropdown-item 默认是 display: block，且带 padding/margin 固定值。
实操建议：
- 放弃
.dropdown-item，直接用<button class="btn btn-sm btn-outline-secondary d-inline-block">和<a href="#" class="btn btn-sm btn-link d-inline-block"> - 必须加
d-inline-block（不是d-inline），否则按钮无法设置宽高、内边距无效 - 注意：链接按钮的
.btn-link默认无背景，若需视觉平衡，可补bg-white border等微调 - 别忘了给父容器加
min-width，防止窄屏下内容挤压换行
响应式断点下按钮换行？检查是否漏了 .btn-group 的包裹层级
最常被忽略的一点：当你用 .col-6 把两个按钮分在两列里，看似“同一行”，实则已脱离 .btn-group 的弹性控制。一旦视口变窄，.col-6 自动变成 100% 宽，按钮就真·分两行了。
性能 / 兼容性影响：
- 用
.btn-group是纯 CSS 方案，无 JS 依赖，所有现代浏览器表现一致 - 嵌套在
.input-group或.navbar中时，.btn-group会自动适配父容器的 padding 和 margin，而裸按钮不会 - 旧版 Bootstrap（v4）中
.btn-group对rem缩放更敏感，v5 后基本稳定
复杂点在于：按钮内容动态生成（比如权限控制后按钮数量不定）时，.btn-group 仍能自适应，但你要确保 JS 插入节点后没破坏其 DOM 结构——比如别把新按钮插到 .btn-group 外面再用 CSS 拉回来。
