如何迫使一些.card-IMG-覆盖内容在底部对齐？

Question

我有这样的管内的一系列引导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