如何在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

使用d-flex使card-img-overlay显示灵活，然后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中垂直对齐的更多信息

Answer 2

如果要垂直对齐叠加层，最简单的解决方案是将d-flex和align-items-end到card-img-overlay 。 这会将h3移至卡的底部

<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 d-flex align-items-end">
      <h4 class="card-title">Title</h4>
   </div>
</div>

如果您愿意，可以阅读有关在引导程序中垂直对齐项目的更多信息，请参见此处：

Bootstrap 4对齐项

在css-tricks.com上，您可以找到有关Flexbox行为的惊人指南-请在此处查看： Flexbox完整指南