如何使Bootstrap 4卡的卡柱高度相同？

我正在使用Bootstrap 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>

您可以将类放在“行”还是“列”上？如果在行上使用卡片，则在卡片（边框）上将不可见。 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">

这里的其他一些答案似乎“古怪”。为什么要使用最小高度或什至更差的固定高度？

我认为这个问题（相等的高度）是远离浮动块div的原因之一？

我正在使用Bootstrap 4（测试版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”，我使卡具有响应能力。使用“卡片h-100”，我已将所有卡片设置为其父栏的高度。在我的系统上，这可行，但是我不是专业人士。所以，希望我能帮助某人。

最好的解决方案，Bootstrap 4满足您的所有需求：使用.d-flex和.flex-fill类。不要使用，card-decks因为它们没有响应。我用过col-sm，您可以使用所需的.col类，或者col-lg-xx表示宽度列的数量，例如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>

您可以应用class h-100，它代表高度100％。

更新：在Bootstrap 4中，flexbox现在是默认设置，每card-deck行将包含3张卡。卡片将满满。

http://www.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

上校相同高度的相关
引导卡

这是我的做法：

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>

把卡包在里面

<div class="card-group"></div>

要么

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

我采取了稍微不同的方法。使用卡座包装纸

我添加了一个样式规则，该规则限制了卡片块的高度：

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

得到以下结果：

您可以使用卡座，它将对齐所有卡...这来自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>

另一个有用的方法是Card Grids：

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

实现这一目标（我知道）的最简单方法：

• 套用.text-monospace卡片中的所有文字。
• 将卡片中的所有文本限制为相同的字符数。

更新

添加.text-truncate卡的标题和/或其他文本。这将文本强制为一行。使卡片具有相同的高度。

我是新手，因此，如果我一起缺少任何东西，请原谅。

我尝试了以上许多方法。如果将高度设置为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>

这对我来说很好：

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

在引导程序常规CSS上强制我们的CSS。

我遇到了这个问题，大多数人都使用jQuery ...这是我的解决方案。“别介意，我只是这个领域的初学者。”

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

如果任何卡片项目的高度为例如400px（基于其内容），因为flex-align的默认值为拉伸，则.card-item（行或卡片收集类的子级）将被拉伸。使得卡的高度为父代的100％将占据此全高。

我希望我是正确的。是吗

如果有人感兴趣，那么有一个名为jquery.matchHeight.js的jquery插件。

https://github.com/liabru/jquery-match-height

matchHeight使所有选定元素的高度完全相等。它处理导致相似插件失败的许多极端情况。

对于一行卡，我使用：

<div class="row match-height">

然后在整个网站范围内启用：

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

jsfiddle

只需使用CSS添加所需的高度，例如：

.card{
    height: 350px;
}

您将必须添加自己的CSS。

如果您查看文档，这是砖石风格的-重点是它们的高度不同。