Bootstrap 5 如何实现行内按钮居中对齐且等间距均匀排列

核心实现逻辑 #

直接使用Bootstrap 5自带的弹性布局工具类即可实现，不受JS动态生成按钮的影响，适配2-10个按钮的排布需求。

代码示例 #

<!-- 按钮父容器，样式全部绑定在父级，无需单独处理子按钮 -->
<div class="d-flex justify-content-center gap-3 flex-wrap my-4">
  <!-- 以下按钮可通过JS循环动态生成 -->
  <button class="btn btn-primary flex-fill">操作按钮1</button>
  <button class="btn btn-primary flex-fill">操作按钮2</button>
  <button class="btn btn-primary flex-fill">操作按钮3</button>
  <!-- 最多可支持10个按钮正常排布 -->
</div>

类属性说明 #

• d-flex：为容器开启弹性布局，是所有排布效果的基础
• justify-content-center：让整行按钮在页面中水平居中
• gap-*：控制按钮之间的固定间距，*可替换为1-5的数值，对应0.25rem到3rem的间距，可按需调整
• flex-wrap：可选属性，小屏设备下按钮数量过多时自动折行，避免按钮溢出屏幕
• flex-fill：可选属性，加在每个按钮上，可让所有按钮自动等分父容器宽度，实现等宽均匀排布；如果不需要按钮等宽，删除该属性即可，按钮会按自身内容宽度保持等间距排列

适配说明 #

JS动态生成按钮不会影响布局效果，循环生成按钮时只要给每个按钮带上对应的btn样式类和可选的flex-fill类即可，无需额外编写布局逻辑。

内容的提问来源于stack exchange，提问作者Tester321