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

更多关于vertical align in 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 Align-items

在css-tricks.com上，您可以找到有关Flexbox行为的惊人指南-请在此处检查： A Complete Guide to Flexbox

如何在Bootstrap 4中的卡片中覆盖图像底部的文本

2 个答案: