Html 如何使 Bootstrap 4 卡片在卡片列中具有相同的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35868756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap 4 cards the same height in card-columns?
提问by blueSurfer
I am using Bootstrap 4 alpha 2 and taking advantage on cards. Specifically, I am working with this exampletaken from the official docs. How can I make all cards to be the same height?
我正在使用 Bootstrap 4 alpha 2 并利用卡片。具体来说，我正在使用取自官方文档的这个示例。如何使所有卡片的高度相同？
All I can think by now is setting the following CSS rule:
我现在能想到的就是设置以下 CSS 规则：
.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>
回答by Kerry7777
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://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items
您可以将类放在“行”或“列”上？如果您在行上使用它，则不会在卡片（边框）上可见。 https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
Some of the other answers here seem 'wacky'. Why would use a min-height or even worse a fixed height?
这里的其他一些答案似乎“古怪”。为什么要使用最小高度或更糟的固定高度？
I thought this issue (equal heights) was part of the reason for progression away from floating block divs?
我认为这个问题（等高）是远离浮动块 div 的部分原因？
回答by user3350279
I'm using Bootstrap 4 (Beta 2). Meanwhile the situations seems to have changed. I had the same problem and found an easy solution. This is my code:
我正在使用 Bootstrap 4（测试版 2）。与此同时，情况似乎发生了变化。我遇到了同样的问题，并找到了一个简单的解决方案。这是我的代码：
<div class="container-fluid content-row">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="card h-100">
… content card …
</div>
</div>
… all the other cards …
</div>
</div>
With "col-sm-12 col-lg-6" I've made the cards responsive. With "card h-100" I've set all cards to the height of their parent column. On my system this works, but I'm not a pro. So, hopefully I helped someone.
使用“col-sm-12 col-lg-6”，我使卡片具有响应性。使用“卡片 h-100”，我将所有卡片设置为其父列的高度。在我的系统上这有效，但我不是专业人士。所以，希望我帮助了某人。
回答by djibe
Best solution, Bootstrap 4 has all you need : USE THE .d-flexand .flex-fillclass. Don't use the card-decksas they are not responsive.
I used col-sm, you can use the .colclass you want, or use col-lg-xthe x means number of width column e.g 4 or 3 for best view if the post have many then 3 or 4 per column
最佳解决方案，Bootstrap 4 拥有您所需要的一切：使用 THE.d-flex和.flex-fill类。不要使用 ，card-decks因为它们没有响应。我用过col-sm，你可以使用.col你想要的类，或者使用col-lg-xx 表示宽度列的数量，例如 4 或 3 以获得最佳视图，如果帖子每列有很多然后 3 或 4
Here is the beast, try to reduce the browser window to XS to see it in action :
这是野兽，尝试将浏览器窗口缩小到 XS 以查看它的运行情况：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
<div class="row my-4">
<div class="col">
<div class="jumbotron">
<h1>Bootstrap 4 Cards all same height demo</h1>
<p class="lead">by djibe.</p>
<span class="text-muted">(thx to BS4)</span>
<p>Dependencies : standard BS4</p>
<p>
Enjoy the magic of flexboxes and leave the useless card-decks.
</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
A small card content.
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
Another small card content.
</div>
</div>
</div>
</div>
</div>
</div>
</div>回答by bsesic
You can apply the class h-100, which stands for height 100%.
您可以应用 class h-100，它代表高度 100%。
回答by Zim
UPDATE:In Bootstrap 4, flexbox is now default, and each card-deckrow will contain 3 cards. The cards will fill to full height.
更新：在Bootstrap 4 中，flexbox 现在是默认值，每card-deck行将包含 3 张卡片。卡片将填满全高。
http://www.codeply.com/go/x91w5Cl6ip
http://www.codeply.com/go/x91w5Cl6ip
The Bootstrap 4 alpha card-columnsuses CSS3 columns which don't really support equal heights (except column-fill which is only suppored in Firefox).
Bootstrap 4 alphacard-columns使用的 CSS3 列并不真正支持等高（除了仅在 Firefox 中支持的 column-fill）。
If you instead enable Bootstrap 4 flexbox mode, you could instead use the card-deckand a little CSS to equalize the height and wrap every 3 columns.
如果您改为启用 Bootstrap 4 flexbox 模式，您可以改为使用card-deck和一些 CSS 来均衡高度并每 3 列换行一次。
@media (min-width:34em) {
.card-deck > .card
{
width: 29%;
flex-wrap: wrap;
flex: initial;
}
}
http://codeply.com/go/YFFFWHVoRB
http://codeply.com/go/YFFFWHVoRB
回答by Nick
Here is how I did it:
这是我如何做到的：
CSS:
CSS：
.my-flex-card > div > div.card {
height: calc(100% - 15px);
margin-bottom: 15px;
}
HTML:
HTML：
<div class="row my-flex-card">
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
aaaa
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
bbbb
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
cccc
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
dddd
</div>
</div>
</div>
</div>
回答by Mujtaba Kably
wrap the cards inside
把卡片包在里面
<div class="card-group"></div>
<div class="card-group"></div>
or
或者
<div class="card-deck"></div>
<div class="card-deck"></div>
回答by skrile
I took a slightly different approach. Using the Card Deck wrapper
我采取了稍微不同的方法。使用卡片组包装器
I added a style rule that limits the height of the card block:
我添加了一个样式规则来限制卡片块的高度：
.card .card-block {max-height:300px;overflow:auto;}
This give the following result:
这给出了以下结果：
回答by jeyglo
You can use card-deck, it will align all the cards... this come from bootstrap 4 official page.
你可以使用 card-deck，它会对齐所有的卡片......这来自 bootstrap 4 官方页面。
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>
回答by Antonio Petricca
Another useful approach is Card Grids:
另一种有用的方法是Card Grids：
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>