Bootstrap 5如何自动对齐卡片页脚？求替代card-deck的方案

问题描述 #

使用Bootstrap 5编写如下HTML代码时，发现第三列卡片的长度比前两列更长：

<!-- bootstrap scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">

<section id="pricing">

  <h2>A Plan for Every Giraffes's Needs</h2>
  <p>Simple and affordable price plans for your and your dog.</p>
  <div class="row row-cols-1 row-cols-md-3 rowy">
    <div class="col-md-6 col-lg-4 coly">
      <div class="card">  

        <div class="card-header">
          <h3>Chihuahua</h3>
        </div>
        <div class="card-body">
          <h2>Free</h2>
          <p>5 Matches Per Day</p>
          <p>10 Messages Per Day</p>
          <p>Unlimited App Usage</p>
          <!-- w-100 100% as wide as parent -->
          <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign</button> 
        </div>
      <div class="card-footer">
          boogle</div>
      </div>
    </div>

    <div class="col-md-6 col-lg-4 coly">
      <div class="card">  

        <div class="card-header">
          <h3>Labrador</h3>

        </div>
        <div class="card-body">
          <h2>$49 / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign Up</button>
        </div>
          <div class="card-footer">
          boogle</div>
      </div>
    </div>
    <div class="col-md-12 col-lg-4">
      <div class="card">  

        <div class="card-header">
          <h3>Mastiff</h3>
          
        </div>
        <div class="card-body">
          <h2>$99 / mo</h2>
          <p>Pirority Listing</p>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button" class="w-75 btn btn-lg btn-outline-dark">Sign Up</button>
        </div>
        <div class="card-footer">
          boogle</div>
      </div>
  </div>
</div>

已知Bootstrap 4中的card-deck类在Bootstrap 5中已被移除，需了解Bootstrap 5中实现卡片自动等高的类似方法。

解决方案 #

Bootstrap 5里可以通过以下几种简单方式实现卡片等高：

1. 给卡片添加h-100类 #

Bootstrap 5的网格列默认是拉伸对齐的，只需给每个卡片加上h-100类，让卡片占满父列的高度，就能自动和最高的卡片保持等高：

<div class="col-md-6 col-lg-4 coly">
  <div class="card h-100"> <!-- 添加h-100类 -->
    <!-- 卡片内容 -->
  </div>
</div>

给所有卡片都加上这个类即可解决高度不一致的问题。

2. 配合Flexbox工具类强化对齐（可选） #

如果需要更明确的控制，可以给包含卡片的行（row）加上align-items-stretch类（这其实是网格的默认行为，明确添加不影响效果），再配合卡片的h-100类，效果和上面一致：

<div class="row row-cols-1 row-cols-md-3 rowy align-items-stretch">
  <!-- 列和卡片内容 -->
</div>

3. 让卡片底部元素对齐（进阶需求） #

如果希望卡片底部的按钮或页脚也能对齐到同一高度，可以给card-body添加d-flex flex-column类，再给底部元素加上mt-auto，让它自动推到卡片底部：

<div class="card-body d-flex flex-column">
  <h2>$99 / mo</h2>
  <p>Pirority Listing</p>
  <p>Unlimited Matches</p>
  <p>Unlimited Messages</p>
  <p>Unlimited App Usage</p>
  <!-- mt-auto 自动将按钮推到底部 -->
  <button type="button" class="mt-auto w-75 btn btn-lg btn-outline-dark">Sign Up</button>
</div>

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