Bootstrap4实现卡片在列中横竖填充父容器并保持等高

嗨，我来帮你搞定这个卡片等高的需求！你的场景很常见——既要在大屏上3列均分，小屏下单列显示，又要让内容长度不同的卡片保持一样的高度，还不想用不够灵活的卡片组/卡片deck。其实用Bootstrap 4自带的flex布局类就能轻松实现，完全不用额外写CSS。

最简单的实现方式：给卡片加h-100类 #

Bootstrap 4的.row默认是flex容器，它的直接子元素（也就是你的.col-12 col-md-4列）会自动被拉伸到相同的高度。只要给每个卡片加上.h-100类，让卡片填满所在列的高度，就能让所有卡片保持等高了。

示例代码：

<div class="row">
  <!-- 第一列 -->
  <div class="col-12 col-md-4 mb-3">
    <div class="card h-100">
      <div class="card-header">卡片标题1</div>
      <div class="card-body">
        <p class="card-text">这里是较短的卡片内容...</p>
      </div>
    </div>
  </div>
  <!-- 第二列 -->
  <div class="col-12 col-md-4 mb-3">
    <div class="card h-100">
      <div class="card-header">卡片标题2</div>
      <div class="card-body">
        <p class="card-text">这里是很长很长的卡片内容，可能有好几行，用来测试高度是否能和其他卡片保持一致。这里是很长很长的卡片内容，可能有好几行，用来测试高度是否能和其他卡片保持一致。</p>
      </div>
    </div>
  </div>
  <!-- 第三列 -->
  <div class="col-12 col-md-4 mb-3">
    <div class="card h-100">
      <div class="card-header">卡片标题3</div>
      <div class="card-body">
        <p class="card-text">这里是中等长度的卡片内容...</p>
      </div>
    </div>
  </div>
</div>

进阶需求：让卡片footer固定在底部 #

如果你的卡片有footer，希望不管内容长短，footer都固定在卡片底部，可以结合d-flex flex-column和flex-grow-1类：

1. 给列加上d-flex flex-column，让列内部的元素垂直排列并能拉伸
2. 给卡片加上flex-grow-1，让卡片占满列的剩余高度，footer就会被挤到底部

示例代码：

<div class="row">
  <div class="col-12 col-md-4 mb-3 d-flex flex-column">
    <div class="card flex-grow-1">
      <div class="card-header">卡片标题</div>
      <div class="card-body">
        <p class="card-text">这里是较短的卡片内容...</p>
      </div>
      <div class="card-footer">
        固定底部的Footer
      </div>
    </div>
  </div>
  <!-- 其他列同理 -->
</div>

这两种方法都完美符合你的需求：中等及以上屏幕显示3列，小屏幕自动变成1列，所有卡片高度统一，而且完全利用Bootstrap的内置类，不需要额外自定义CSS。

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