如何实现Bootstrap 5中按钮组居中且换行后左对齐？

我想要制作一个包含响应式方形按钮的页面，要求：

• 按钮并排排列，换行时自动从左侧开始排列
• 按钮容器整体始终保持居中
• 使用Bootstrap 5实现

我尝试过flex布局但没达到预期效果，理想效果示意图如下：

我的现有代码：

.box {
  height: 65px;
  width: 60px;
  background: black;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
  
    <div class="d-flex flex-wrap gap-4 w-50 border border-primary">

      <div class="box">
      </div>

      <div class="box">
      </div>

      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>

     </div>
  
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

要实现需求，只需调整容器的Bootstrap类，核心是让容器水平居中，同时保留flex-wrap的换行左对齐特性：

修改后的完整代码：

.box {
  height: 65px;
  width: 60px;
  background: black;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <!-- 关键修改：添加mx-auto实现水平居中，保留原有flex布局特性 -->
    <div class="d-flex flex-wrap gap-4 w-50 mx-auto border border-primary">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

关键说明 #

• mx-auto：Bootstrap内置类，给容器添加左右自动外边距，实现水平居中，这是原代码缺失的核心属性
• d-flex flex-wrap：维持flex布局并允许换行，换行时元素默认左对齐，符合需求
• gap-4：保留按钮间的固定间距
• w-50：保留你设置的容器宽度，也可根据需求调整为w-75、container等宽度类

修改后，容器会始终水平居中，按钮在容器内并排排列，空间不足时自动换行并左对齐，完全符合预期效果。

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