如何使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级= card-group " > < / div >

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

2017-12-30 13:51:30

其他回答

我是一个新手，所以请原谅，如果我错过了一些东西在一起。

我尝试了上面的许多方法。如果你设置高度= 100%，卡片将始终扩展到最长卡片的最大长度。容器将把所有内容限制为相同的长度。

我想要看到容器，所以我使用背景颜色来帮助我了解发生了什么。

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

2020-03-02 21:52:13

你可以应用h-100级别，代表高度100%。

2019-02-28 00:02:38

对于引导5和4

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

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

2021-03-31 14:16:50

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

2020-04-07 16:25:16

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

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

更新

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

2018-08-13 08:16:18

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

推荐文章

最新文章

标签