如何强制某些.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>

如何将段落和徽章对准卡片的底部，同时使标题对准顶部？

Answer 1

使用卡片叠加层上的flexbox utility classes。 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