如何使用 bootstrap 将项目与列中的底部对齐

Question

我无法将图像与页面底部对齐。尽管该列的高度相同，但它只是没有完全对齐到底部。代码笔： https: //codepen.io/monsmado/pen/WNvmdOL<div class="container">    <div class="row">    <div class="col-sm">        <img src="https://via.placeholder.com/557x347" class="img-fluid">        <h2>Lorum Ipsum</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>            <div class="d-sm-flex align-self-end">            <a href="#">                <img src="https://via.placeholder.com/31x36">            </a>        </div>    </div>    <div class="col-sm">        <img src="https://via.placeholder.com/557x347" class="img-fluid">        <h2>Lorem ipsum dolor sit amet consectetur</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        <div class="d-sm-flex align-self-end">            <a href="#">                <img src="https://via.placeholder.com/31x36">            </a>        </div>    </div>    <div class="col-sm">        <img src="https://via.placeholder.com/557x347" class="img-fluid">        <h2>Lorem ipsum dolor sit amet consectetur</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        <div class="d-sm-flex align-self-end">            <a href="#">                <img src="https://via.placeholder.com/31x36"">            </a>        </div>    </div>    </div></div>

Answer 1

您可以将display: flex和添加flex-direction: column到包含底部项目的 div 中：.col-smmargin-top: auto

代码笔

如果您使用的是 bootstrap 4，则可以d-flex flex-column对.col-smdiv 和mt-auto底部项目 div 使用 class：

代码笔