如何在Bootstrap中将卡片内容垂直对齐至底部？

你需要让卡片的图片覆盖层（card-img-overlay）内的标题、文本和按钮对齐到卡片底部，之前尝试的flex布局没达到预期，可通过以下两种方式解决：

方案一：整体内容靠底部对齐 #

直接给card-img-overlay添加d-flex flex-column justify-content-end类，利用Bootstrap的flex工具类让所有子元素整体对齐到容器底部：

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 g-3 my-3">
    <div class="col">
      <div class="card text-uppercase">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay d-flex flex-column justify-content-end">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-uppercase">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay d-flex flex-column justify-content-end">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-uppercase">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay d-flex flex-column justify-content-end">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-uppercase text-bg-dark">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay d-flex flex-column justify-content-end">
          <h5 class="card-title">FUNCIONAL</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

方案二：标题文本在上，按钮单独靠底 #

如果希望标题和文本保持在上方，仅让按钮自动对齐到底部，给card-img-overlay添加d-flex flex-column，同时给按钮添加mt-auto（自动margin顶推到底部），可配合mb-*类给文本和标题设置间距：

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 g-3 my-3">
    <div class="col">
      <div class="card text-uppercase">
        <img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
        <div class="card-img-overlay d-flex flex-column">
          <h5 class="card-title mb-2">FUNCIONAL</h5>
          <p class="card-text mb-4">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary mt-auto">Go somewhere</a>
        </div>
      </div>
    </div>
    <!-- 其余卡片按相同方式修改 -->
  </div>
</div>

注意事项 #

• 确保没有自定义CSS覆盖Bootstrap的flex工具类样式；
• card-img-overlay默认是绝对定位且占满卡片高度，无需额外设置高度；
• 若使用方案二，mt-auto仅在flex容器内生效，必须保证card-img-overlay已添加d-flex flex-column。

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