Bootstrap 4需用d-flex+justify-content-between实现按钮组两端对齐，因text-align:justify对替换元素无效，且.btn-group不支持该布局；多按钮时可用justify-content-around或手动模拟gap。
Bootstrap 4 本身不提供「按钮组两端对齐」的现成类，text-align: justify 对 button 元素无效，必须用 Flex 布局模拟；直接套 text-lg-justify 没用，那是给文本用的。
为什么 text-align: justify 对按钮组失效
按钮是替换元素（replaced element），浏览器不会为 button 或 div.btn-group 自动插入「可伸缩间隙」来实现两端对齐。即使父容器设了 text-align: justify，子项也不会被拉伸或重排间距——它只对内联文本流起作用。
-
text-lg-justify只影响段落、span、p等文本容器，对button、.btn-group完全无感 - 试图在按钮间加空格/换行符再设
text-align: justify，仍无法控制按钮自身宽度和间距分布 - Flex 容器内的
text-align属性会被忽略，布局由justify-content控制
用 d-flex + justify-content-between 实现真·两端对齐
这是最直接、兼容性好、语义清晰的做法：把两个按钮放进一个 Flex 容器，用 justify-content-between 推开首尾，中间留空。注意——这要求按钮数量明确（通常是 2 个）。
<div class="d-flex justify-content-between"> <button type="button" class="btn btn-outline-primary">取消</button> <button type="button" class="btn btn-primary">确认</button> </div>
- 必须用
d-flex容器，不能只给.btn-group加类——.btn-group是inline-flex，不响应justify-content-* - 若按钮超过 2 个（如 3 个），
justify-content-between会让首尾贴边、中间居中，不是严格“等距两端对齐”；此时改用justify-content-around或justify-content-evenly（注意 IE 不支持后者） - 小屏下想改为垂直堆叠？加
flex-column flex-md-row，而不是混用.btn-group-vertical
三按钮及以上时用 gap + justify-content-center 更可控
Bootstrap 4 原生不支持 gap（v5.1+ 才有），但你可以手动补一个兼容性写法，或改用工具类模拟等距效果。更稳妥的是用 mx-auto 配合固定宽度容器，或直接写 CSS。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：外层
d-flex flex-wrap justify-content-center，按钮统一设flex: 0 0 calc(33.333% - 1rem)（减去 gap），再用margin模拟间隙 - 简单替代：用
.btn-toolbar包裹多个.btn-group，再配合justify-content-between控制工具栏级对齐 - 别用
text-center包按钮组来“居中”，那只是让按钮组整体居中，不是按钮之间两端对齐 - 如果按钮带下拉菜单（
.dropdown），确保外层d-flex不干扰下拉定位——.dropdown-menu默认 relative to parent，只要父按钮没overflow: hidden就没问题
响应式断点切换要靠类名覆盖，不是叠加
想实现「小屏垂直堆叠 + 大屏两端对齐」，不能指望一个 class 同时生效。得用断点类组合，并理解 Bootstrap 4 的媒体查询优先级逻辑。
- 小屏垂直：用
flex-column（对应 xs） - 中屏开始水平：加
flex-sm-row，再加justify-content-sm-between - 大屏强化对齐：用
justify-content-lg-between，它会覆盖 sm 的设置 - 错误写法：
class="d-flex justify-content-between justify-content-md-center"—— md 类不会“覆盖” between，而是并存，最终行为不可控 - 真实可用结构：
<div class="d-flex flex-column flex-sm-row justify-content-sm-between"><p>两端对齐的本质是空间分配问题，不是文本渲染问题；按钮组的响应式对齐必须从容器布局入手，而不是在按钮上加对齐类。最容易被忽略的一点：Bootstrap 4 的 <code>.btn-group从来就不是为两端对齐设计的，它只解决「紧邻+对齐+圆角隐藏」，别把它当 Flex 布局替代品。
