如何使用引导程序来调整两张卡的行轮廓？

Question

如何调整卡体的高度不相同。如您在下面的屏幕快照中所见，这些卡具有相同的高度，导致前两个卡看起来不专业。我希望它们看起来像这样：。

前两张卡片的轮廓在高度上被拉伸，看起来很傻。如何调整它们的轮廓以使其在上图中具有红色轮廓的外观？

<div class="container">
         <div class="card-deck mb-3 text-center">
            <div class="card mb-4 box-shadow">
               <div class="card-header">
                  <h4 class="my-0 font-weight-normal">Multi car savings <i class="fas fa-car"></i></h4>
               </div>
               <div class="card-body">
                  <ul class="list-unstyled mt-3 mb-4">
                     <li class="list-group-item">2 cars £50</li>
                     <li class="list-group-item">3 cars £70</li>
                     <li class="list-group-item">5 cars £100</li>
                  </ul>
                  <a href="#mc_embed_signup" class="btn btn-lg btn-block btn-primary">12</a>
               </div>
            </div>
            <div class="card mb-4 box-shadow">
               <div class="card-header">
                  <h4 class="my-0 font-weight-normal">Armed forces & NHS <i class="fas fa-address-card"></i></h4>
               </div>
               <div class="card-body">
                  <ul class="list-unstyled mt-3 mb-4">
                     <li class="list-group-item">10% off for armed forces from the final quoted price</li>
                     <li class="list-group-item">10% off for NHS staff members from the final quoted price</li>
                  </ul>
                  <button type="button" class="btn btn-lg btn-block btn-primary">Sign up for discounts</button>
               </div>
            </div>
            <div class="card mb-4 box-shadow">
               <div class="card-header">
                  <h4 class="my-0 font-weight-normal">Car Clubs <i class="fas fa-car"></i></h4>
               </div>
               <div class="card-body">
                  <ul class="list-unstyled mt-3 mb-4">
                     <p class="text-uppercase text-dark font-weight-bold">Only applies to CCK small stickers</p>
                     <li class="list-group-item">5% off £100</li>
                     <li class="list-group-item">10% off £200</li>
                     <li class="list-group-item">15% off £300</li>
                  </ul>
                  <ul class="list-unstyled mt-3 mb-4">
                     <p class="text-uppercase text-dark font-weight-bold">Only Large to CCK small stickers</p>
                     <li class="list-group-item">5% off £100</li>
                     <li class="list-group-item">10% off £200</li>
                     <li class="list-group-item">15% off £300</li>
                  </ul>
                  <button type="button" class="btn btn-lg btn-block btn-primary">Sign up for discounts</button>
               </div>
            </div>
         </div>

Answer 1

在卡片容器上使用此

.card-deck {
    align-items: flex-start;
}