如何将Bootstrap 5卡片内的Read more链接对齐至底部？

要让卡片里的“Read more”链接对齐到底部，核心是调整右侧内容容器的布局方式，利用flex特性把中间内容撑满剩余空间，从而把链接推到底部。修改后的代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card p-2">
  <div class="row g-3">
    <div class="col-5">
      <img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100">
    </div>
    <div class="col-7">
      <!-- 关键改动：转为垂直flex容器并保持满高 -->
      <div class="card-body h-100 p-0 m-0 d-flex flex-column">
        <span class="card-text mb-1 small">463</span>
        <!-- 让标题占据剩余空间，把链接挤到底部 -->
        <h6 class="card-title custom-text-truncate flex-grow-1">How a responsive website can boost user satisfaction</h6>
        <a href="#" class="mb-0 small">Read more -></a>
      </div>
    </div>
  </div>
</div>

关键改动说明： #

• 给.card-body添加d-flex flex-column，将其变成垂直方向的flex容器，内部元素按垂直顺序排列
• 给标题h6添加flex-grow-1，让它自动填充容器内的剩余空间，这样下方的链接就会被推到容器底部
• 保留h-100确保右侧内容容器高度和左侧图片一致，维持整体布局对齐

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