logo标签列表

如何在card-columns中使Bootstrap卡片保持相同高度？

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards
220

我正在使用 Bootstrap 4 alpha 2，并利用卡片（cards）功能。具体来说，我正在使用官方文档中的 this example 进行开发。我如何让所有的卡片高度保持一致？

目前我能想到的方法是设置以下 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>
到目前为止有什么进展吗？有任何代码可以分享吗？ - baao
2
那个例子是针对类似砖石排列的列设计的。这种风格的整个重点在于卡片高度的不同。如果您想要相等的高度，请使用牌组并启用flexbox模式。 - Quentin
2
这个卡片组件仅适用于同一行内的卡片。我想要的是与card-columns相同的效果，但保持相同的高度。 - blueSurfer
23个回答
319
您可以将类放在“行”或“列”上吗？ 如果您将其放在行上，卡片（边框）上不会显示。 https://getbootstrap.com/docs/4.6/utilities/flex/#align-items
<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
    </div>
</div>

更新BS5完整HTML示例

https://codepen.io/Kerrys7777/pen/QWgwEeG

11
"H-100"并不是一个固定的高度，它是在行高的100%处的高度。 - konyak
2
这应该是AC的答案。 - meeps
2
这才是真正的答案。 - Andrew Bullock
@konyak，是的，伙计，我意识到了。我不是指h-100（请向下滚动此页面）。 - Kerry7777
1
@Kerry7777，感谢你提供了非常必要的澄清，伙计！对于我的情况来说，关键是在保持卡片的div中添加d-flex align-items-stretch，但我还需要在卡片和卡片底部都添加'h-100'以确保它们都匹配。 - Kyle Burkett
显示剩余3条评论
236

我正在使用Bootstrap 4 (Beta 2)。与此同时，情况似乎已经改变了。我曾经遇到同样的问题并找到了一个简单的解决方案。这是我的代码：

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

使用 "col-sm-12 col-lg-6" 使卡片具有响应性。 使用 "card h-100" 将所有卡片设置为其父列的高度。 在我的系统上，这个方法有效，但我不是专业人士。 希望能帮助到别人。

36
非常简单，h-100。 - PNC
16
.h-100 - 精彩的 - JCraine
2
当d-flex在IE中出现问题（我必须支持它）时，这对我很有帮助。我只是在父div中添加了一个mb-4来稍微分离卡片。 - Charles Paske
我会在所有带有.col-*类的div中添加.py-2类，以在行之间添加填充。 - konyak
@konyak 或者只需将 class="col-sm-6 my-col mb-1"> 中的 mb-1 添加到列中即可。 - DarkLite1
显示剩余5条评论
144

Bootstrap 4提供了一切所需：使用.d-flex和.flex-fill类。不要使用card-decks，因为它们不具有响应性。 我使用了col-sm，您可以使用想要的.col类，或者使用col-lg-x，其中x表示列宽的数量，例如4或3，以获得最佳视图，如果文章很多，则每列可以选择3或4个

尝试将浏览器窗口缩小到XS以查看实际效果：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

1
这个回答非常好！如果您无法在所有视口中使用“card-column”或“card-deck”来获取所需的响应式行为。 - Getsomepeaches
这对我很有效。我有一列带有一个大卡片，在右侧有另外两行的另一列。因此，左侧的卡片取决于相邻两行的高度，谢谢！ - Erich García
这是正确的方法。我尝试了 card-columns，但每行最多只能有3列。感谢您提供的答案。 - Yeku Wilfred Chetat
卡牌堆在我的情况下无法工作，您的答案解决了问题！ - TBG
很棒的答案，如果有人正在使用BS 5，请查看迁移页面，因为许多内容已经改变（包括卡片布局方式）——再见心爱的jumbotron... - nicorellius
2021年 - 与BS4一起使用AdminLTE3进行了开发 - 这应该是您尝试的第一件事！如果使用card-outline，请在其上放置flex-fill，并在您的列上放置d-flex。+1 - Wade
40
您可以应用类别h-100，它代表高度为100%。
19

我是这样做的：

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

更新: 在Bootstrap 4中，默认使用flexbox，每个card-deck行将包含3个卡片。卡片将填充到完整的高度。

http://codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha版的card-columns使用CSS3列，不支持等高（除了Firefox浏览器支持的column-fill）。

如果您改用Bootstrap 4 flexbox模式，可以使用card-deck和一些CSS来使高度相等并将每3列包装在一起。

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

相关内容
如何使用Bootstrap 4使列中的卡片具有相同高度？

我已经fork了你的codeply来测试一些东西；我需要标题也能够延伸到相同的高度，但是在这里并没有发生：https://www.codeply.com/go/fqnQZ2ZGJy -- 你知道有什么方法可以让我的“较短标题”与较长的标题具有相同的高度吗？我尝试过使用flexbox和grid进行调整，但似乎无法完美解决。 - davewoodhall
9
你可以使用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>
对我没用。有效的是 class="card h-100" https://www.codeply.com/go/jbcgzs2Nzq - hubert17
5
我采用了略有不同的方法。使用Card Deck包装器。
我添加了一个样式规则，限制卡块的高度：
.card .card-block {max-height:300px;overflow:auto;}

这将产生以下结果：在此输入图像描述
在卡片主体中使用，例如：<div class="card-body" style="max-height:300px;overflow:auto;"> - Leandro Bardelli
4
将卡片包装在以下代码中：
或者
3

另一种有用的方法是卡片网格：

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接