bootstrap 4 不支持 d-inline-flex，应使用 .btn-group 组件实现按钮并排，因其封装了边框合并、圆角统一和禁用状态联动等关键特性，手动添加 display: inline-flex 会丢失这些功能。
Bootstrap 4 默认不提供 d-inline-flex 这类工具类——它只在 Bootstrap 5+ 中才引入完整的 Flex 工具类体系，包括 d-flex、d-inline-flex、flex-wrap 等。你在 Bootstrap 4 里直接写 d-inline-flex，浏览器会忽略这个 class，按钮依然按默认行内行为渲染，容易换行、错位或间距失控。
Bootstrap 4 没有 d-inline-flex，该用什么替代
Bootstrap 4 的按钮组逻辑依赖 .btn-group 容器，它内部使用 display: inline-block（v4.6 及之前）或 display: inline-flex（部分构建版本），但这个行为是封装在组件里的，不对外暴露为独立工具类。
- 必须用
<div class="btn-group"> <button>A</button><button>B</button> </div>，不能只靠 CSS 类“模拟” - 手动加
style="display: inline-flex"虽能临时生效，但会丢失.btn-group的边框合并、圆角统一、禁用状态联动等关键特性 - 如果容器需要响应式断点控制（比如小屏堆叠、大屏并排），
.btn-group本身不支持，得配合栅格或媒体查询包裹
两个按钮并排但不用 btn-group？风险很高
有人试图绕过 .btn-group，直接写：<button class="btn btn-primary">A</button><button class="btn btn-primary">B</button>，指望它们自动并排。这在 Bootstrap 4 下极易出问题：
- 按钮是
inline-block元素，HTML 换行或空格会转成 4px 左右的间隙，导致间距不可控 - 不同文字长度下，
line-height和vertical-align差异会让按钮上下错位 - 小屏宽度不足时，第二个按钮大概率掉到下一行，且没有换行对齐机制
- 禁用状态（
disabled）不会同步影响父容器样式，视觉反馈断裂
想让多个按钮横向滚动，别碰 d-inline-flex
横向滚动卡片列表常见，但有人误以为给按钮加 d-inline-flex + overflow-x-auto 就能实现横向滑动。在 Bootstrap 4 中这条路走不通：
-
overflow-x-auto不是 Bootstrap 4 原生类，需自行定义 CSS - 即使加了
white-space: nowrap和display: inline-block，按钮仍可能因容器宽度计算错误而换行 - 正确做法是用
<div class="d-flex flex-nowrap">（需自定义该 class）+ 手动设 <code>min-width，或干脆升级到 Bootstrap 5 - 更稳妥的 v4 方案：用栅格
.col-auto包裹每个按钮，并在外层加overflow-x-auto和white-space: nowrap
Bootstrap 4 的按钮排列能力边界很清晰：它靠组件封装，不靠原子化工具类。强行用后版类名或手写 flex 布局，表面能跑，实际会漏掉状态同步、响应式适配、可访问性等隐性契约。真要灵活控制，要么接受 .btn-group 的约束，要么升级框架。
