twitter-bootstrap - 如何强制一些 .card-img-overlay 内容在底部对齐？

Question

我在这样的列中有一系列 Bootstrap 4 卡......

<div class="col-6 pb-md-4">
<a href="http://www.example.com/link.html" class="card bg-dark text-white shadow-sm border-0">
  <img class="card-img" style="opacity: .25" src="http://res.cloudinary.com/braincloud/image/fetch/w_500,h_350,c_thumb,g_faces/http://www.example.com/wp-content/uploads/cnn-thumbnail-4-1024x576.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Charged News Environment Powering Marketing Engagement: CNN’s Andrew Morse</h4>
    <p class="card-text">Last updated 3 mins ago</p>
    <span class="badge badge-danger font-weight-normal mr-2">Executive Views</span>
  </div>
</a>
</div>

如何将段落和徽章与卡片底部对齐，同时保持标题与顶部对齐？

标签： twitter-bootstrapbootstrap-4

Answer 1

在卡片覆盖层上使用flexbox 实用程序类。d-flex flex-column在叠加层上。然后mt-auto将段落推到底部。

   <div class="row">
        <div class="col-6 pb-md-4">
            <a href="https://www.beet.tv/2019/01/cnn.html" class="card bg-dark text-white shadow-sm border-0">
                <img class="card-img" style="opacity: .25" src="http://res.cloudinary.com/braincloud/image/fetch/w_500,h_350,c_thumb,g_faces/http://www.contexthq.com/wp-content/uploads/cnn-thumbnail-4-1024x576.jpg" alt="Card image">
                <div class="card-img-overlay d-flex flex-column align-items-start">
                    <h4 class="card-title">Charged News Environment Powering Marketing Engagement: CNN’s Andrew Morse</h4>
                    <p class="card-text mt-auto">Last updated 3 mins ago</p>
                    <span class="badge badge-danger font-weight-normal mr-2">Executive Views</span>
                </div>
            </a>
        </div>
    </div>

https://www.codeply.com/go/dJxBV5rDhv