Bootstrap 5 中等设备下5列拆分为居中两行布局的实现方法

解决方案 #

这个需求可以完全通过 Bootstrap 5 内置类实现，无需额外编写自定义CSS。
你当前实现不符合预期的核心原因是使用了justify-content-between两端对齐类，中等屏幕下元素换行后会保持两端对齐规则，导致底部两列分别贴向左右两侧，无法居中。 #

修改后的代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <!-- 中等屏幕及以上用居中对齐，替换原来的justify-content-between -->
  <div class="row text-center justify-content-center g-3">
    <!-- 栅格规则：移动端12列（单栏）、中等屏4列（一行3个）、大屏自动等分（一行5个） -->
    <div class="col-12 col-md-4 col-lg">
      <img src="https://via.placeholder.com/200x100" class="img-fluid" />
    </div>
    <div class="col-12 col-md-4 col-lg">
      <img src="https://via.placeholder.com/200x100" class="img-fluid" />
    </div>
    <div class="col-12 col-md-4 col-lg">
      <img src="https://via.placeholder.com/200x100" class="img-fluid" />
    </div>
    <div class="col-12 col-md-4 col-lg">
      <img src="https://via.placeholder.com/200x100" class="img-fluid" />
    </div>
    <div class="col-12 col-md-4 col-lg">
      <img src="https://via.placeholder.com/200x100" class="img-fluid" />
    </div>
  </div>
</div>

关键配置说明 #

• 栅格类配置：
  • col-12：移动端（小于768px）占满整行，实现单栏效果
  • col-md-4：中等屏幕（768px~991px）每列占1/3行宽，第一行放3个，剩下2个自动换行到第二行，配合父容器的justify-content-center实现底部两列居中
  • col-lg：桌面端（大于等于992px）自动等分行宽，5个列均匀分布在同一行
• 内置类替换自定义CSS：
  • 用Bootstrap内置的img-fluid类实现图片最大宽度100%自适应，无需自定义img样式
  • 用栅格间距类g-3（可按需调整数值1~5）实现列之间的间距，也可以单独给列加mt-4类实现顶部间距，无需自定义.row .col-6的margin样式

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