如何使用 Bootstrap 实现按钮水平居中并均匀分布间距

使用 bootstrap 的 flexbox 工具类（如 `d-flex`、`justify-content-center` 和 `gap`）可轻松实现多按钮水平居中与等距排列，避免手动设置 margin 导致的换行或布局错乱问题。

在 bootstrap 5+ 中，推荐采用语义清晰、响应式友好的 Flexbox 布局方案，而非依赖固定 margin 或重复 ID（如原代码中多个 id=”buttons” 违反 html 唯一性规范）。以下是优化后的标准实践：

✅ 推荐写法（Bootstrap 5.3+）

   Print Label   Label Wijzigen   Scan   Verzenden 

关键类说明：

• d-flex：启用 Flex 容器；
• justify-content-center：水平居中所有子项；
• gap-3：在按钮间统一添加 1rem（即 16px）间距（支持 gap-1 到 gap-5，也可用 gap-xx 响应式变体如 gap-md-4）；
• flex-wrap：确保在小屏幕下自动换行（可选，若需强制单行则移除）；
• my-4：为整个按钮组添加上下外边距，提升垂直节奏感。

⚠️ 注意事项

• 禁止重复 ID：HTML 中 id 必须唯一，应改用 class=”btn-group-item” 等通用类替代 id=”buttons”；
• 避免 !important 和固定宽高：原 css 中 height: 175px; width: 175px; 会破坏响应式，并可能因内容长度不同导致文字溢出或截断；建议让按钮按内容自然伸缩，必要时用 min-width 或 flex-grow 控制；
• 移动端适配：若按钮在手机上过密，可结合响应式 gap 类，例如
  ；

• 无障碍增强：为按钮添加明确的 aria-label（尤其图标按钮）并确保足够对比度。

? 进阶技巧：等宽按钮 + 垂直居中容器

若需所有按钮严格等宽且整体在视口垂直居中：

   
     Print Label     Label Wijzigen     Scan     Verzenden   
 

综上，拥抱 Bootstrap 内置的现代布局工具（Flexbox + Gap），既能保证代码简洁健壮，又能兼顾可访问性与响应式需求——告别“yeet 一个按钮到下一行”的魔幻现实。