如何使Bootstrap 4卡在卡列相同的高度?

我使用引导4 alpha 2和利用卡。 具体地说，我正在使用来自官方文档的这个例子。我怎样才能使所有的卡片都是相同的高度?< / p >

我现在能想到的就是设置下面的CSS规则:

.card {
min-height: 200px;
}
但这只是一个硬编码的解决方案，在一般情况下是行不通的。 我的视图中的代码与文档中的代码相同，即:

<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>
503306 次浏览
小开

jsfiddle

只需要用CSS添加你想要的高度，示例:

.card{
height: 350px;
}

您必须添加自己的CSS。

如果你检查文档，这是为< em >砌体< / em >样式-重点是它们不是相同的高度。

小开

在引导4中，flexbox现在是默认的，并且每个card-deck行将包含3张卡片。卡片将填满高度。

http://codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha card-columns使用的CSS3列并不真正支持等高(列填充除外，它只在Firefox中支持)。

如果你启用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

< p > 相关的 < br > 在列中引导4张相同高度的卡片 < br > < / p >
小开

我采取了一种稍微不同的方法。使用卡组包装器

我添加了一个样式规则来限制卡块的高度:

.card .card-block {max-height:300px;overflow:auto;}

这将给出以下结果: enter image description here < / p >

小开

以下是我的做法:

CSS:

.my-flex-card > div > div.card {
height: calc(100% - 15px);
margin-bottom: 15px;
}

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>
小开

如果有人感兴趣，有一个jquery插件叫做:jquery. matchheight .js

https://github.com/liabru/jquery-match-height

matchHeight使所有选定元素的高度完全相等。

.它处理了许多导致类似插件失败的边缘情况

对于一排卡片，我使用:

<div class="row match-height">

然后在站点范围内启用:

$('.row.match-height').each(function() {
$(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});
小开

你可以把类放在“;行”;还是“;栏”? 如果你在一行上使用它，将不会在卡(边界)上可见。 https://getbootstrap.com/docs/4.6/utilities/flex/#align-items < / p > 

<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
</div>
</div>

更新bs5完整的HTML示例

< a href = " https://codepen。io / Kerrys7777 /钢笔/ QWgwEeG noreferrer“rel = > https://codepen.io/Kerrys7777/pen/QWgwEeG < / >

小开

我正在使用Bootstrap 4 (Beta 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>

使用“col-sm-12 col-lg-6”，我使卡片具有响应性。使用“card h-100”，我将所有卡片设置为它们的父列的高度。在我的系统上这是可行的，但我不是专业的。希望我能帮到别人。

小开

把卡片包在里面

<div class="card-group"></div>

或

<div class="card-deck"></div>

小开
使用.d-flex和.flex-fill类。不要使用card-decks，因为它们没有响应。 我使用了col-sm，你可以使用你想要的.col类，或使用col-lg-x x表示宽度列的数量，例如4或3，如果帖子有很多，那么每列3或4

尝试将浏览器窗口缩小到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>

小开

实现这个(据我所知)的最简单方法:

  • 将.text-monospace应用于卡片中的所有文本。
  • 将卡片中的所有文本限制为相同数量的字符。

更新

在卡片的标题和或其他文本中添加.text-truncate。这将迫使文本变成一行。使卡片具有相同的高度。

小开

你可以应用类h-100，它代表高度100%。

小开

我是一个新手，所以请原谅，如果我错过了一些东西在一起。

我尝试了上面的许多方法。如果你设置高度= 100%，卡片将始终扩展到最长卡片的最大长度。容器将把所有内容限制为相同的长度。

我想要看到容器，所以我使用背景颜色来帮助我了解发生了什么。

<div class="col-lg-3"  style="background-color: rosybrown;">
<div class="card w-100" Style="height: 100%">
<div class="card-body">
<img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
<h4>CBe Happy</h2>
小开

你可以使用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>
小开

另一个有用的方法是卡网格:

<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>

小开

这对我来说很有效:

<div class="card card-body " style="height:80% !important">

强迫我们的CSS在bootstrap一般CSS。

小开

我遇到过这个问题，大多数人使用jQuery…这是我的解决方案。“别介意，我只是个初学者……”

.cards-collection {
.card-item {
width: 100%;
margin: 20px 20px;
padding:0 ;
.card {
border-radius: 10px;
button {
border: inherit;
}
}
}
}

     .container-fluid
.row.cards-collection.justify-content-center
.card-item.col-lg-3.col-md-4.col-sm-6.col-11
.card.h-100

如果任何卡片项的高度是400px(基于它的内容)，因为flex-align的默认值是拉伸，那么.card-item(行或卡片收集类的子类)将被拉伸。将卡的高度设置为父卡的100%，就会占据这个高度。

我希望我是对的。我是吗?

小开

这可能对你有帮助

只要遵循这段代码

<div class="row">
<div class="col-md-4 h-100">contents....</div>
<div class="col-md-4 h-100">contents....</div>
<div class="col-md-4 h-100">contents....</div>
</div>

使用bootstrap类“h-100”;

小开

你可以用card-body将d-flex and flex-column添加到div中。

下面是一个工作示例:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />






<div class="container">
<div class="row">
<div class="col-4 d-flex align-self-stretch">
<div class="card shadow-sm mb-4">
<img src="https://placehold.it/500x300" class="card-img-top" alt="">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
<p class="text-muted">Lorem ipsum dolor </p>
<div class="mt-auto border border-danger">
<p class="text-uppercase mb-0">Hello World!</p>
<p class="text-uppercase">consectetur adipiscing elit</p>
<a href="#" class="btn btn-info btn-block">CTA</a>
</div>
</div>
</div>
</div>


<div class="col-4 d-flex align-self-stretch">
<div class="card shadow-sm mb-4">
<img src="https://placehold.it/500x300" class="card-img-top" alt="">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-uppercase">Smaller title here that wraps 1 line</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-auto border border-danger">
<p class="text-uppercase mb-0">Hello World!</p>
<p class="text-uppercase">adipiscing </p>
<a href="#" class="btn btn-info btn-block">CTA</a>
</div>
</div>
</div>
</div>


<div class="col-4 d-flex align-self-stretch">
<div class="card shadow-sm mb-4">
<img src="https://placehold.it/500x300" class="card-img-top" alt="">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-uppercase">Longer title here that wraps 3 lines, Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-auto border border-danger">
<p class="text-uppercase mb-0">Hello World!</p>
<a href="#" class="btn btn-info btn-block">CTA</a>
</div>
</div>
</div>
</div>
</div>
</div>

小开

对于引导5和4

height -把你所有的卡片放在div中，class="card-deck"

WIDTH -给出你所有卡片的样式{min-width: 50ch}

小开

根据这个问题我有一个答案，它可能会帮助你，你可以使用它。你可以只使用height属性，并将其设置为height: 100vh;，我已经使用了70vh，卡片将是固定的高度，你已经给出。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<!-- Bootstrap 4.5 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<!-- Bootstrap JS Requirements -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<style>
/*Use height property to set equil card height*/
.card {
background-color: #56568a;
margin: 10px !important;
height: 70vh;
width: auto;
}
</style>
<body>
<div class="container">
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top img-fluid" src="img5.PNG" alt="Card image cap">
<div class="card-block">
<small class="purple"> Product Launch</small>
<h4 class="card-title">Leveraging Social Proof for Growth</h4>
<p class="card-text">Duolingo removes language barriers by connecting people that need
websites translated with students
that learning a
language...</p>
<p class="card-text "><i class="far fa-user"></i><small class="purple">Praveen</small>
<i class="far fa-clock    "></i><small class="purple">Today</small>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top img-fluid" src="img6.PNG" alt="Card image cap">
<div class="card-block">
<small class="purple"> ddc</small>
<h4 class="card-title">Leveraging Social Proof for Growth</h4>
<p class="card-text">Duolingo removes language barriers by connecting people that need
websites translated with students
that learning a
language...</p>
<p class="card-text"><i class="far fa-user"></i><small class="purple">Praveen</small>
<i class="far fa-clock    "></i><small class="purple">2 days ago</small>
</p>
</div>
</div>
</div>
</div>
</body>
</html>

小开 
<div class='row'>
<div class="col-xs-12 d-flex align-items-stretch"></div>
</div>

提交答案