这对我来说很有效:

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

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

Bootstrap 4有你需要的一切:使用.d-flex和.flex-fill类。不要使用卡片组，因为他们没有反应。 我使用了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>

把卡片包在里面

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

or

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

实现这一目标的最简单方法(我所知道的):

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

更新

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

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

斯菲德尔

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

.card{
    height: 350px;
}

您必须添加自己的CSS。

如果你检查文档，这是为砖石风格-这一点是他们不都是相同的高度。