Bootstrap5中如何实现列内卡片高度统一？

针对你遇到的卡片高度因内容/Logo差异不一致的问题，无需预设固定高度，可通过以下几种Bootstrap原生特性+CSS微调的方案解决：

方案1：让卡片自动填充父容器高度 #

Bootstrap的栅格系统基于flex布局，给卡片添加h-100类，即可让卡片占满所在列（col-lg-6）的高度，同一行的卡片会自动对齐高度：

<div class="col-lg-6">
  <div class="card m-b-30 h-100"> <!-- 添加h-100 -->
    <!-- 卡片内容 -->
  </div>
</div>

方案2：统一Logo区域高度（解决Logo尺寸差异问题） #

给Logo容器添加flex对齐类，同时限制Logo的最大高度，避免不同尺寸的Logo撑高容器：

<div class="col-lg-4 text-center d-flex align-items-center justify-content-center">
  <img src="/static/logo.png" alt="logo" class="img-fluid" style="max-height: 120px; object-fit: contain;">
</div>

• d-flex align-items-center justify-content-center：确保Logo在容器内垂直水平居中
• max-height + object-fit: contain：限制Logo最大高度，同时保持图片比例不变

方案3：优化内部内容对齐（解决文本行数差异问题） #

如果需要让卡片底部的联系方式始终对齐，可将右侧文本区域改为flex列布局，用mt-auto把底部内容推到卡片底部：

<div class="col-lg-8 d-flex flex-column">
  <!-- 上方可变内容 -->
  <div>
    <h5 class="card-text mb-0"><i class="fa-solid fa-person"></i> user 1</h5>
    <p class="card-text">CDD IT Informatique</p>
    <hr class="dropdown-divider">
  </div>
  <!-- 底部固定内容，自动对齐到卡片底部 -->
  <div class="mt-auto">
    <p class="card-text"><i class="fa-sharp fa-solid fa-building"></i> ###</p>
    <p class="card-text"><i class="fa-solid fa-envelope"></i> mail</p>
    <p class="card-text"><i class="fa-solid fa-phone"></i> phone</p>
  </div>
</div>

完整修改后的核心代码示例 #

<div class="container">
  <div class="row gy-5">
    <div class="col-lg-6">
      <div class="card m-b-30 h-100">
        <div class="card-body py-5">
          <div class="row h-100">
            <div class="col-lg-4 text-center d-flex align-items-center justify-content-center">
              <img src="/static/logo.png" alt="logo" class="img-fluid" style="max-height: 120px; object-fit: contain;">
            </div>
            <div class="col-lg-8 d-flex flex-column">
              <div>
                <h5 class="card-text mb-0"><i class="fa-solid fa-person"></i> user 1</h5>
                <p class="card-text">CDD IT Informatique</p>
                <hr class="dropdown-divider">
              </div>
              <div class="mt-auto">
                <p class="card-text"><i class="fa-sharp fa-solid fa-building"></i> ###</p>
                <p class="card-text"><i class="fa-solid fa-envelope"></i> mail</p>
                <p class="card-text"><i class="fa-solid fa-phone"></i> phone</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 其他卡片复用此结构 -->
  </div>
</div>

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