如何在Bootstrap 5的card-group中设置每行最多5张卡片？

Bootstrap 5的原生card-group组件默认让卡片在一行内并排（不换行）且强制等高，但没有直接配置项控制每行卡片数量。要实现每行最多5张卡片，有两种实用方案：

方法一：用Bootstrap网格系统替代（推荐） #

利用Bootstrap的12列网格系统结合响应式断点，既能控制每行卡片数，又能保持卡片等高，完全贴合Bootstrap原生设计逻辑。

实现步骤： #

1. 定义自定义列类，用于大屏下每行5张卡片（因12无法被5整除，需手动设置宽度）：

/* 大屏（xl，≥1200px）下每行5张 */
@media (min-width: 1200px) {
  .col-xl-5th {
    flex: 0 0 auto;
    width: 20%; /* 100% / 5 = 20% */
  }
}

2. 用row作为容器，每个卡片包裹在响应式列中，同时给卡片加h-100类保证等高：

<div class="row g-4">
  <!-- 卡片1 -->
  <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-5th">
    <div class="card h-100">
      <img src="card-img.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card Title 1</h5>
        <p class="card-text">简短的卡片描述内容。</p>
      </div>
    </div>
  </div>

  <!-- 卡片2 -->
  <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-5th">
    <div class="card h-100">
      <!-- 卡片内容 -->
    </div>
  </div>

  <!-- 重复添加更多卡片 -->
</div>

该方案会自动适配不同屏幕：

• 移动端（<576px）：每行1张
• 平板竖屏（≥576px）：每行2张
• 平板横屏（≥768px）：每行3张
• 小屏桌面（≥992px）：每行4张
• 大屏桌面（≥1200px）：每行5张

方法二：自定义card-group样式 #

如果需要保留card-group结构（比如依赖其边框合并特性），可通过自定义CSS修改flex布局规则：

自定义CSS： #

.card-group-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 卡片间距，可按需调整 */
}

/* 默认每行5张，设置最小宽度避免过窄 */
.card-group-5 .card {
  flex: 1 0 calc(20% - 1rem);
  min-width: 200px;
}

/* 响应式调整不同屏幕下的每行数量 */
@media (max-width: 1199px) {
  .card-group-5 .card {
    flex: 1 0 calc(25% - 1rem); /* 每行4张 */
  }
}

@media (max-width: 991px) {
  .card-group-5 .card {
    flex: 1 0 calc(33.333% - 1rem); /* 每行3张 */
  }
}

@media (max-width: 767px) {
  .card-group-5 .card {
    flex: 1 0 calc(50% - 1rem); /* 每行2张 */
  }
}

@media (max-width: 575px) {
  .card-group-5 .card {
    flex: 1 0 100%; /* 每行1张 */
  }
}

HTML结构： #

<div class="card-group-5">
  <div class="card">
    <img src="card-img.jpg" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">卡片内容...</p>
    </div>
  </div>

  <!-- 更多卡片 -->
</div>

注意：原生card-group的边框合并特性在开启wrap后会失效，若需保留该效果，需额外添加CSS处理边框样式。

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