【发布时间】：2018-09-30 18:55:24
【问题描述】：
我想将链接对齐到卡片的底部中心。我尝试将 d-flex 和 flex-column 类添加到 .card-body 和 mt-auto 到链接中，正如其他地方所建议的那样。请注意，我没有使用 container 或 container-fluid div 类（Bootstrap documentation 建议不要使用一个边对边设计）。
相关HTML（查看完整代码CodePen）：
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
<a href="#" class="card-link text-info mt-auto">View CodePen</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">Project Two</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
<a href="#" class="card-link text-info">View CodePen</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
<a href="#" class="card-link text-info">View CodePen</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
<a href="#" class="card-link text-info">View CodePen</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
<a href="#" class="card-link text-info">View CodePen</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
<a href="#" class="card-link text-info">View CodePen</a>
</div>
</div>
</div>
</div>
【问题讨论】：
-
如果这些盒子是固定大小的，至少在高度方面会更容易，但从你的代码中不清楚它们是否是。
h-100是高度指令吗？ -
我没有看到这些类添加到
.card-body或您的代码笔中的链接。如果您在检查器中添加规则，它会按您的意愿工作 -
如果这些框是固定大小的，则给框一个相对位置，并给链接一个绝对位置和底部位置，无论从底部向上多少像素..然后在文本上你可以已设置高度并将溢出设置为椭圆
-
@tadman yes--h-100 表示高度 100% getbootstrap.com/docs/4.0/utilities/sizing
-
您可能需要为内盒指定一个固定的高度，因为一旦您这样做了，标签与顶部的固定偏移量就会变得更加容易。如果这个高度发生变化，可能会有点棘手。
标签： html css twitter-bootstrap bootstrap-4