Bootstrap 4中如何将卡片内链接对齐至底部居中？

我明白你想让卡片内的链接固定在底部居中，而且是边缘到边缘的布局（不用container类）。你已经尝试了flex相关的类，但可能还差几个细节调整，我来帮你搞定：

关键调整步骤 #

• 让所有卡片等高：给每个.card添加h-100类，这样同一行的卡片不管内容多少，高度都会保持一致，确保链接都在同一水平底部位置。
• 完善卡片主体的flex布局：你已经给.card-body加了d-flex flex-column，这步是对的，再补充flex-grow-1类，让卡片主体撑满卡片的剩余空间，这样mt-auto才能精准把链接推到底部。
• 链接居中处理：给链接添加text-center d-block类，让链接以块级元素显示并居中对齐，不管链接文字长短都能稳定居中。

完整示例代码 #

<div class="row portfolio">
  <div class="col-sm-12">
    <h2>Portfolio</h2>
  </div>
  <!-- 示例卡片 -->
  <div class="col-lg-4 col-sm-6 p-2">
    <div class="card h-100">
      <img src="your-project-image.jpg" class="card-img-top" alt="Portfolio project">
      <div class="card-body d-flex flex-column flex-grow-1">
        <h5 class="card-title">Project Name</h5>
        <p class="card-text">这里是项目的描述内容，不管内容长短，下面的链接都会被固定在卡片底部居中位置</p>
        <!-- 底部居中的链接 -->
        <a href="#" class="mt-auto text-center d-block">查看项目详情</a>
      </div>
    </div>
  </div>
  <!-- 更多卡片重复上述结构即可 -->
</div>

额外说明 #

如果你的链接是按钮形式，直接把类加到按钮上同样生效：

<a href="#" class="btn btn-primary mt-auto text-center d-block">查看项目详情</a>

另外，因为你用的是边缘到边缘布局，注意自定义的.portfolio类不要给卡片或列添加冲突的margin/padding样式，避免干扰flex布局的效果。

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