- 首页
- 前端开发
- 在 Bootstrap 4 中将链接与卡片底部对齐
在 Bootstrap 4 中将链接与卡片底部对齐
[英] Align link to bottom of card in Bootstrap 4
本文介绍了在 Bootstrap 4 中将链接与卡片底部对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将链接与卡片的底部中心对齐.我尝试将 d-flex 和 flex-column 类添加到 .card-body 和 mt-auto 到链接，如别处建议的那样.注意我没有使用 container 或 container-fluid div 类(Bootstrap
相关 HTML(查看完整代码CodePen):
<div class="col-sm-12"><h2>投资组合</h2>
<div class="col-lg-4 col-sm-6portfolio-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">项目一</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Amet numquam aspernatur eum quasi sapiente nesciunt?Voluptatibus 坐，repelt sequi itaque deserunt，dolores in，nesciunt，illum tempora ex quae?虚无，多洛雷姆！</p><a href="#" class="card-link text-info mt-auto">查看 CodePen</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目二</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.Nam viverra euismod odio，gravida pellentesque urna varius vitae.</p><a href="#" class="card-link text-info">查看 CodePen</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目三</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Quos quisquam, error quod sed cumque, odio distinctio velit nostrum necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p><a href="#" class="card-link text-info">查看 CodePen</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目四</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.Nam viverra euismod odio，gravida pellentesque urna varius vitae.</p><a href="#" class="card-link text-info">查看 CodePen</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目五</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.Nam viverra euismod odio，gravida pellentesque urna varius vitae.</p><a href="#" class="card-link text-info">查看 CodePen</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目六</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Itaque earum nostrum suscipit ducimus nihil Provident，perferendis rem illo，voluptate atque，sit eius in voluptates，nemo repellat fugiat excepturi！尼莫，埃塞.</p><a href="#" class="card-link text-info">查看 CodePen</a>
解决方案
链接放在 d-flex 和 flex-column 的末尾 card-body 和 mt-auto 链接.在您的 CodePen 上，您缺少其中一些类(类示例)！
注意:您也可以在 官方文档.
要使链接居中，您可以使用 card-link 上的 text-center 类.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><div class="行投资组合"><div class="col-sm-12"><h2>投资组合</h2>
<div class="col-lg-4 col-sm-6portfolio-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">项目一</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Amet numquam aspernatur eum quasi sapiente nesciunt?Voluptatibus 坐，repelt sequi itaque deserunt，dolores in，nesciunt，illum tempora ex quae?虚无，多洛雷姆！</p><a href="#" class="card-link text-info mt-auto text-center">查看代码笔</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目二</h4><p class="card-text ">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.Nam viverra euismod odio，gravida pellentesque urna varius vitae.</p><a href="#" class="card-link text-info mt-auto text-center">查看代码笔</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目三</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Quos quisquam, error quod sed cumque, odio distinctio velit nostrum necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p><a href="#" class="card-link text-info mt-auto text-center">查看代码笔</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目四</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.Nam viverra euismod odio，gravida pellentesque urna varius vitae.</p><a href="#" class="card-link text-info mt-auto text-center">查看代码笔</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目五</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.Nam viverra euismod odio，gravida pellentesque urna varius vitae.</p><a href="#" class="card-link text-info mt-auto text-center">查看代码笔</a>
<div class="col-lg-4 col-sm-6portfolio-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">项目六</h4><p class="card-text">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Itaque earum nostrum suscipit ducimus nihil Provident，perferendis rem illo，voluptate atque，sit eius in voluptates，nemo repellat fugiat excepturi！尼莫，埃塞.</p><a href="#" class="card-link text-info mt-auto text-center">查看代码笔</a>
I would like to align links to the bottom center of cards. I tried adding the classes d-flex and flex-column to .card-body and mt-auto to the link, as suggested elsewhere. Note I'm not using a container or container-fluid div class (Bootstrap documentation suggests going without one for an edge-to-edge design).
Relevant HTML (for full code view 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>
解决方案
The link is placed on the end with d-flex and flex-column on card-body and mt-auto on the link. On your CodePen you are missing some of these classes (example with classes)!
Note: You can find this example also on the official documentation of Bootstrap 4.
To center the links you can use the text-center class on the card-link.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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 text-center">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 d-flex flex-column">
<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 mt-auto text-center">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 d-flex flex-column">
<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 mt-auto text-center">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 d-flex flex-column">
<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 mt-auto text-center">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 d-flex flex-column">
<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 mt-auto text-center">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 d-flex flex-column">
<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 mt-auto text-center">View CodePen</a>
</div>
</div>
</div>
</div>
这篇关于在 Bootstrap 4 中将链接与卡片底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
