- 首页
- 前端开发
- 如何使 Bootstrap 4 卡片在卡片列中具有相同的高度?
如何使 Bootstrap 4 卡片在卡片列中具有相同的高度?
[英] How to make Bootstrap 4 cards the same height in card-columns?
本文介绍了如何使 Bootstrap 4 卡片在卡片列中具有相同的高度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Bootstrap 4 alpha 2 并利用卡片.具体来说，我正在使用取自官方文档的 这个示例.如何让所有卡片的高度相同?
我现在能想到的就是设置以下 CSS 规则:
.card {最小高度:200px；}
但这只是一个硬编码的解决方案，在一般情况下不起作用.我认为的代码与文档中的代码相同，即:
<div class="card"><img class="card-img-top" data-src="..." alt="Card image cap"><div class="card-block"><h4 class="card-title">换行的卡片标题</h4><p class="card-text">这是一张较长的卡片，下面的支持文本是附加内容的自然引导.这个内容有点长.</p>
<div class="card card-block"><blockquote class="card-blockquote"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p><页脚><small class="text-muted">在<cite title="Source Title">Source Title</cite>中出名的某个人</小></页脚></blockquote>
<div class="card"><img class="card-img-top" data-src="..." alt="Card image cap"><div class="card-block"><h4 class="card-title">卡片标题</h4><p class="card-text">这张卡片下面有支持文本，作为对附加内容的自然引导.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>
<div class="card card-block card-inverse card-primary text-xs-center"><blockquote class="card-blockquote"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p><页脚><小>在<cite title="Source Title">Source Title</cite>中出名的某个人</小></页脚></blockquote>
<div class="card card-block text-xs-center"><h4 class="card-title">卡片标题</h4><p class="card-text">这张卡片下面有支持文本，作为对附加内容的自然引导.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>
<div class="card"><img class="card-img" data-src="..." alt="卡片图片">
<div class="card card-block text-xs-right"><blockquote class="card-blockquote"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p><页脚><small class="text-muted">在<cite title="Source Title">Source Title</cite>中出名的某个人</小></页脚></blockquote>
<div class="card card-block"><h4 class="card-title">卡片标题</h4><p class="card-text">这是一张更宽的卡片，下面的支持文本是附加内容的自然引导.这张卡片比第一张卡片的内容更长，以显示等高动作.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>
解决方案
您可以将类放在行"中；还是列"?如果您在行上使用它，则不会在卡片(边框)上可见.https://getbootstrap.com/docs/4.6/utilities/flex/#align-项目
<div class="row"><div class="col-lg-4 d-flex align-items-stretch"><!--这里的卡片-->
更新 BS5 完整 HTML 示例
https://codepen.io/Kerrys7777/pen/QWgwEeG
I am using Bootstrap 4 alpha 2 and taking advantage on cards.
Specifically, I am working with this example taken from the official docs. How can I make all cards to be the same height?
All I can think by now is setting the following CSS rule:
.card {
min-height: 200px;
}
But that is just a hard coded solution that won't work in a general case.
The code in my view is the same as the one in the docs i.e:
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-xs-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block text-xs-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card">
<img class="card-img" data-src="..." alt="Card image">
</div>
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
解决方案
You can either put the classes on the "row" or the "column"?
Won't be visible on the cards (border) if you use it on the row.
https://getbootstrap.com/docs/4.6/utilities/flex/#align-items
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
</div>
</div>
UPDATE BS5 FULL HTML EXAMPLE
https://codepen.io/Kerrys7777/pen/QWgwEeG
这篇关于如何使 Bootstrap 4 卡片在卡片列中具有相同的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
