html - Flexbox 中的等高 Bootstrap 卡片

Question

我正在为我的卡片组使用 flexbox。问题是如果 .card-block.p 中的文本增加，我希望带有 .card 类的 flex 元素 div 应该保持相同的高度在一张卡片中，其余卡片的高度也随着卡片的增加而增加。

这是我的 fiddle :https://jsfiddle.net/a2d758jg/ :

.card-group {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  max-height: 475px;
  background-color: lightgrey;
}

.card img {
  width: 100%;
}

.card {
  background-color: cornflowerblue;
  width: 30%;
  margin: 0px;
  flex: 2;
  border: 1px solid lightgrey;
}

.card-block {
  padding: 10px;
  background-color: #fff;
}

.card-title {
  font-size: 18px;
  color: grey;
  font-family: verdana, sans;
}

.card-footer {
  padding: 15px;
  border-top: 1px solid lightgrey;
  background-color: lightgrey;
}

<div class="container">
  <div class="card-group">
    <div class="card">
      <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
      <div class="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 content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional
          content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
      <div class="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>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Answer 1

对您的代码进行四处调整:

.card-group {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  /* max-height:475px; <-- remove */
  background-color: lightgrey;
}

.card img {
  width: 100%;
}

.card {
  background-color: cornflowerblue;
  width: 30%;
  margin: 0px;
  flex: 2;
  border: 1px solid lightgrey;
  display: flex;           /* new */
  flex-direction: column;  /* new */
}

.card-block {
  padding: 10px;
  background-color: #fff;
  flex: 1;                /* new */
}

.card-title {
  font-size: 18px;
  color: grey;
  font-family: verdana, sans;
}

.card-footer {
  padding: 15px;
  border-top: 1px solid lightgrey;
  background-color: lightgrey;
}

<div class="container">
  <div class="card-group">
    <div class="card">
      <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
      <div class="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 content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional
          content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
      <div class="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>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

revised fiddle