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

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

我现在能想到的就是设置下面的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>

当前回答

这对我来说很有效:

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

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

2020-06-24 14:26:55

其他回答

对于引导5和4

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

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

2021-03-31 14:16:50

这对我来说很有效:

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

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

2020-06-24 14:26:55

Bootstrap 4有你需要的一切:使用.d-flex和.flex-fill类。不要使用卡片组，因为他们没有反应。我使用了col-sm，你可以使用你想要的col类，或者使用col-lg-x, x表示宽度列的数量，例如4或3，如果帖子有很多，那么每列3或4

尝试将浏览器窗口缩小到XS以查看它的运行情况:

2018-03-09 15:49:42

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

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

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

结果如下:

2016-10-19 11:40:46

以下是我的做法:

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>

2017-03-12 10:04:19

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

推荐文章

最新文章

标签