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

【问题标题】：How do I position text on the bottom of an image overlay in a card in Bootstrap 4如何将文本放置在 Bootstrap 4 卡片中图像叠加层的底部
【发布时间】：2019-10-20 00:03:40
【问题描述】：

我正在使用 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 %}

【问题讨论】：

将您的.card-title 包裹在一个 div 中，使其定位为绝对位置并将其置于底部

标签： html css bootstrap-4

【解决方案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

更多关于vertical align in Bootstrap 4

【讨论】：

这只有在图像是卡片中最底部的对象时才有效。如果您在下方放置正文或页脚，则标题会显示在底部内容之上。
那不是有问题的场景。 overlay 旨在覆盖卡片中的所有内容。 “根据图像，您可能需要也可能不需要其他样式或实用程序。” __ 引导文档

【解决方案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 Align-items

在 css-tricks.com 上，您可以找到关于 flexbox 行为方式的精彩指南 - 在这里查看： A Complete Guide to Flexbox

【讨论】：