如何使Bootstrap 4卡的卡柱高度相同? [英] How to make Bootstrap 4 cards the same height in card-columns?

问题描述

我正在使用Bootstrap 4 alpha 2并在卡上发挥优势. 具体来说，我正在使用此示例(摘自官方文档).如何使所有卡片的高度相同?

I am using Bootstrap 4 alpha 2 and taking advantage on cards. Specifically, I am working with this example taken from the official docs. How can I make all cards to be the same height?

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

All I can think by now is setting the following CSS rule:

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

推荐答案

您可以将这些类放在行"或列"上吗? 如果在行中使用卡片，则在卡片(边框)上将不可见. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align -项目

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

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

我认为这个问题(相等的高度)是远离浮动块div的原因的一部分?

I thought this issue (equal heights) was part of the reason for progression away from floating block divs?

这篇关于如何使Bootstrap 4卡的卡柱高度相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！