博客Card Deck摘要卡片尺寸不一致：如何实现统一大小？

嘿，我来帮你搞定这个卡片尺寸统一的问题！

首先得说，你当前代码里把card-deck和row/col嵌套在一起的写法，很可能干扰了Bootstrap的默认布局逻辑，导致卡片没法自动保持等高。下面给你几个靠谱的解决方案：

方案1：用Bootstrap内置类快速搞定（推荐） #

Bootstrap 4+本身就支持卡片等高，只要调整结构并加上h-100类即可：

<div class="container-fluid">
  <div class="card-deck">
    <!-- 给每个卡片加h-100，强制占满父容器高度 -->
    <div class="card h-100">
      <div class="card-body">
        <p class="card-text">短内容示例</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">底部内容</small>
      </div>
    </div>
    <div class="card h-100">
      <div class="card-body">
        <p class="card-text">这里是很长很长的内容，测试卡片高度是否能统一。不管内容有多少，卡片都要保持一样的尺寸，这样页面看起来才整齐美观...</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">底部内容</small>
      </div>
    </div>
  </div>
</div>

如果希望卡片内的底部元素（比如footer）能对齐，再给card-body加个flex-grow-1类，让它自动填充剩余空间：

<div class="card-body flex-grow-1">
  <!-- 卡片内容 -->
</div>

方案2：用Row+Col配合等高类 #

如果你更习惯用栅格系统（row/col）来控制卡片宽度，同样可以实现等高：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <p class="card-text">短内容</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <p class="card-text">长内容...</p>
        </div>
      </div>
    </div>
  </div>
</div>

方案3：自定义CSS兜底 #

如果上面的方法还不满足需求，直接写CSS强制卡片高度：

/* 给card-deck里的卡片设置最小高度 */
.card-deck .card {
  min-height: 320px; /* 数值根据你的设计调整 */
  display: flex;
  flex-direction: column;
}

/* 让card-body自动拉伸，填充剩余空间 */
.card-deck .card-body {
  flex-grow: 1;
}

核心思路就是：要么利用Bootstrap的flex布局类强制卡片占满高度，要么用自定义CSS固定最小高度+flex布局让内容自适应。

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