如何用Bootstrap实现按钮居中且间距一致，避免换行

先指出你现有代码的两个核心问题：

• 多个按钮用了同一个id="buttons"，HTML里id必须唯一，重复会导致样式、JS选择器失效
• 手动设置margin无法自适应不同屏幕宽度，容易出现换行重叠

下面是修正后的完整代码：

修正后的HTML #

<div class="button-container">
   <button type="button" class="btn btn-secondary action-button">Print Label</button>
   <button type="button" class="btn btn-secondary action-button">Label Wijzigen</button>
   <button type="button" class="btn btn-secondary action-button" data-bs-toggle="modal" data-bs-target="#eanScan">Scan</button>
   <button type="button" class="btn btn-secondary action-button">Verzenden</button>
</div>

对应的CSS #

.button-container {
  display: flex;
  justify-content: space-around; /* 实现按钮与容器边缘、按钮之间的均等间距 */
  align-items: center;
  max-width: 1200px; /* 限制容器最大宽度，避免宽屏时按钮间距过大 */
  margin: 0 auto; /* 让整个按钮容器水平居中 */
  padding: 0 20px; /* 给左右留边距，避免贴屏幕边缘 */
  flex-wrap: wrap; /* 小屏幕自动换行，不会重叠 */
  gap: 20px; /* 直接控制按钮间的最小间距，比margin更可靠 */
}

.action-button {
  height: 175px;
  width: 175px;
  text-align: center;
  margin-top: 0 !important;
}

关键说明： #

• display: flex：让父容器变成弹性布局，自动管理子元素的排列逻辑
• justify-content: space-around：完美匹配你要的「|--button--button--button--button--|」样式，保证所有间距均等
• flex-wrap: wrap：当屏幕宽度不足以放下所有按钮时，自动换行且不会出现元素重叠
• gap：直接控制按钮间的间距，避免了相邻元素margin叠加的问题，比手动设置margin更精准
• 把重复的id="buttons"改成class="action-button"，符合HTML规范

这样不管屏幕宽度怎么变化，按钮都会保持均等间距，要么水平居中排列，要么在小屏幕上自动换行，彻底解决重叠问题。

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