Bootstrap 4：尝试将卡片内的内容与右下角对齐答案

【问题标题】：Bootstrap 4: trying to align content inside a card to the bottom rightBootstrap 4：尝试将卡片内的内容与右下角对齐
【发布时间】：2019-06-20 03:17:28
【问题描述】：

我正在尝试将卡片内的文本和按钮与右下角对齐，但无法正确对齐。

这是我的代码：

<div class="col-sm-3  text-right my-auto">
  <div class="card text-white text-right d-flex">
    <img src="images\col_img_2.jpeg" class="card-img" alt="...">
    <div class="card-img-overlay justify-items-end d-flex align-items-end">
      <h5 class="card-title">Project 2</h5>
      <a href="#" class="btn btn-primary">Lees verder</a>
    </div>
  </div>
</div>
</div>

结果如下：

有人知道如何解决这个问题吗？提前感谢您的好意！

【问题讨论】：

标签： html bootstrap-4 alignment vertical-alignment

【解决方案1】：

我想通了。我通过在“h5”元素上使用 mt-auto 来修复它！这会将“h5”元素和“a”元素推到卡片的底部。

<div class="col-sm-3  text-right my-auto">
  <div class="card text-white text-right d-flex">
   <img src="images\col_img_2.jpeg" class="card-img" alt="...">
    <div class="card-img-overlay d-flex align-items-end flex-column">
      <h5 class="card-title mt-auto">Project 2</h5>
      <a href="#" class="btn btn-primary">Lees verder</a>
    </div>
  </div>
</div>

【讨论】：