如何在Bootstrap 4中将文本放置在卡中图像叠加层的底部

Question

我正在使用Bootstrap 4和带有图像叠加层的卡在图像上放置一些文本。文本显示在图像的顶部，而我希望它显示在底部。

这是卡的html代码：

 <div class="card-deck">
      {% for article in article_list|slice:":3" %}
      <div class="card card-inverse align-self-center">
          <div class="card-header text-center">
            {{ article.category|capfirst }}
          </div>
        <img class="card-img" src="{% static article.image %}" alt="Card    image cap">
        <div class="card-img-overlay">
            <h4 class="card-title">{{ article.title }}</h4>
        </div>
      </div>
    {% endfor %}

Answer 1

使用使card-img-overlay显示屏弯曲d-flex，然后justify-content-end在底部对齐。

       <div class="card bg-inverse">
              <div class="card-header text-center">
                    Category
              </div>
              <img class="card-img" src="//placehold.it/400" alt="Card image cap">
              <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
                    <h4 class="card-title">Title</h4>
              </div>
       </div>

演示： https ：//www.codeply.com/go/7tnRTddIh6

有关Bootstrap 4中垂直对齐的更多信息