等于卡片中 div 容器的高度

Question

我需要制作相同高度的卡片。 我不是指他们自己的卡片，我是指卡片中的容器。

我的代码是这样的

.card-text {
  border: 1px solid lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla<br><br>bla </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla bla </div>
        </div>
      </div>
    </div>
  </div>

有没有人解决，如何使卡片文字等高？

Answer 1

您可以为此使用 flexbox 和属性 align-items。 看到这个

.card-group {
  display: flex;
  align-items: stretch;
}
.card {
  height: 100%;
  border: 1px solid black
}

https://codepen.io/moisesnandres/pen/dqVzGE

Answer 2

.card-text {
  border: 1px solid lightgrey;
}

.card {
  height: 100%
}

.card-body {
  display: flex;
  flex-flow: column; 
}

.card-text {
  flex-grow: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla<br><br>bla </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla bla </div>
        </div>
      </div>
    </div>
  </div>

Answer 3

为什么不使用 .card-deck 而不是 .card-group？ 喜欢：http://getbootstrap.com/docs/4.1/components/card/#card-decks 它是为拥有不同的卡片而制作的，所有卡片都具有相同的高度。 他们还将扩展周围的 .row 元素。