解决Bootstrap卡片在cardWrapper容器中高度不一致问题

要解决两张Bootstrap卡片因内容多少导致高度不一致的问题，以下是几种简单有效的实现方式：

方法1：利用Bootstrap网格+Flex工具类（推荐） #

直接借助Bootstrap自带的布局工具类，无需额外自定义复杂样式，同时兼顾响应式效果：

修改后的HTML代码：

<div class="row g-4 justify-content-center">
  <div class="col-md-4">
    <div class="card h-100">
      <img
        src="https://www.millenniumeyecenter.com/wp-content/uploads/2020/07/What-is-a-life-coach.gif"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Why Work With A Life Coach?</h5>
        <p class="card-text">
          Our most basic need is to progress; evolving and growing towards
          fulfilment. Working with a life coach provides the opportunity to
          create change. The goal is to feel good about who you are and where
          you're headed: to live your best life. Helping people work through
          transitions, relationship issues, family dynamics or self esteem
          issues is what Thrive for Life Coaching is all about.
        </p>
        <a href="/#" class="btn btn-primary">
          Work with me
        </a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <img
        src="https://cdn.tinybuddha.com/wp-content/uploads/2013/07/Meditating-1.jpg"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Live Your Dreams</h5>
        <p class="card-text">
          Many of us realize that life is not what we hoped it might be. Our
          thoughts and beliefs do not always lead us to success and happiness.
          In fact, our thoughts, both positive and negative will predict the
          outcome of our life. Life coaching provides the opportunity to
          discover how to fine tune your thinking. Coaching is future oriented
          - less about sorting thru the past and definitely not therapy.
        </p>
        <a href="/#" class="btn btn-primary">
          Work with me
        </a>
      </div>
    </div>
  </div>
</div>

• row + col-md-4：实现响应式网格布局，控制卡片在中等屏幕及以上的宽度占比
• g-4：设置卡片之间的间距，替代原有的margin写法
• justify-content-center：让卡片在容器中居中对齐
• h-100：强制卡片高度占满父容器，自动匹配最高卡片的高度

方法2：自定义CSS Flex布局 #

如果不想大幅修改HTML结构，直接给外层容器添加Flex属性即可：

修改后的CSS代码：

.cardWrapper {
  display: flex;
  justify-content: center;
  gap: 20px; /* 控制卡片间距，比margin更直观 */
}

.card {
  flex: 0 0 18rem; /* 固定卡片宽度，和原样式保持一致 */
}

Flex布局默认会让子元素（卡片）自动拉伸高度，实现等高效果，同时保持原有卡片的宽度设置。

方法3：Bootstrap Card Deck（适用于Bootstrap 4） #

如果使用Bootstrap 4版本，可直接用card-deck类包裹卡片，它会自动处理卡片等高：

<div class="card-deck justify-content-center">
  <div class="card" style="width: 18rem;">...</div>
  <div class="card" style="width: 18rem;">...</div>
</div>

注意：Bootstrap 5已弃用card-deck，优先推荐方法1的实现方案。

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