css - Bootstrap 4 卡片组，列数基于视口(viewport)

Question

我正在尝试在 bootstrap 4 中实现卡片组功能，以使我所有的卡片高度相同。

bootstrap 提供的示例显示了 4 张漂亮的卡片，但无论视口(viewport)如何，它都是一行 4 张卡片。查看代码here .

这对我来说没有意义，因为我假设您希望将卡片缩小到最小尺寸以使您的内容看起来仍然不错。

然后我尝试添加一些视口(viewport)类来打破屏幕尺寸，但是一旦添加了该 div，卡片组就不再适用，因此卡片的高度不会相等。

我怎样才能做到这一点？这是一个缺失的功能，将在 Bootstrap 4 的完整版本中得到解决吗？

这是 fiddle :https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
        <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

Answer 1

2018 年更新

如果你想要一个responsive card-deck ，使用可见性实用程序在不同的视口(viewport)宽度(断点)上强制换行每 X 列...

Bootstrap 4 responsive card-deck (v 4.1)

---

Bootstrap 4 alpha 2 的原始答案:

您可以使用网格 col-*-* 获得不同的宽度(而不是卡片组)，然后使用 flexbox 为列设置相同的高度。

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2 (阿尔法 2)

问题是没有启用 flexbox 的 card-deck 使用 table-cell ，它变得很难控制宽度。从 Bootstrap 4 Alpha 6 开始，flexbox 是默认的，因此 flexbox 不需要额外的 CSS，h-100 类可用于制作卡片全高: http://www.codeply.com/go/gnOzxd4Spk

---

相关问题: Bootstrap 4 - Responsive cards in card-columns