如何在Bootstrap 4的card-deck中设置每行卡片数量

嘿，我之前也折腾过这个问题！Bootstrap的card-deck默认是靠弹性布局自动分配卡片宽度的，会尽可能在一行塞下更多卡片，但要固定每行2张的话，有两个实用方案，我给你详细说下：

方案一：用Bootstrap网格系统（推荐） #

这是最贴合Bootstrap设计思路的做法，用网格的列来精确控制每行的卡片数量，还能轻松实现响应式效果：

<div class="container">
  <div class="row">
    <!-- 中等屏幕及以上每行2张，小屏幕自动堆叠成1张 -->
    <div class="col-md-6 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Card text</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Card footer text</small>
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Card text</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Card footer text</small>
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Card text</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Card footer text</small>
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Card text</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Card footer text</small>
        </div>
      </div>
    </div>
  </div>
</div>

• col-md-6：表示在屏幕宽度≥768px时，每张卡片占该行50%的宽度，也就是每行2张；小于这个宽度时，卡片会自动占满整行，变成每行1张，完美适配移动端。
• h-100：强制卡片高度一致，避免内容多少导致的卡片参差不齐。
• mb-4：给每个卡片添加底部间距，让布局更透气。

方案二：自定义CSS修改card-deck（适合不想改动原有HTML结构的情况） #

如果你不想调整现有的card-deck结构，也可以通过自定义CSS强制设置每张卡片的宽度，从而控制每行数量：

先保留你原来的HTML结构，然后添加以下CSS：

/* 针对中等屏幕及以上设置每行2张 */
@media (min-width: 576px) {
  .card-deck .card {
    flex: 0 0 50%; /* 固定卡片宽度为容器的50% */
    max-width: 50%;
  }
}

这个方法直接修改card-deck的弹性布局属性，让每张卡片占50%宽度，从而实现每行2张。不过要注意，你需要自己根据需求调整响应式断点（比如min-width的值），不如网格系统灵活，但胜在不用改HTML。

简单说下为什么默认的card-deck做不到：它的flex-basis是auto，会根据容器宽度自动调整卡片的宽度和数量，所以必须手动强制设置宽度才能固定每行的卡片数。

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