css – 基于视口的具有列数的Bootstrap 4卡片组

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

bootstrap提供的示例显示4张漂亮的卡片,但无论是视口,它都是4行卡片.请参阅codeply here.

这对我来说没有意义,因为我认为,您希望卡的最小尺寸缩小到适合您的内容仍然看起来不错.

然后我尝试添加一些视口类来打破屏幕大小,但是一旦添加了div,卡片组就不再适用,因此不会使卡片的高度相等.

我怎样才能完成这项工作？这是缺少的功能,将在Bootstrap 4的完整版本中解决吗？

这是小提琴：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,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>

解决方法

2018年更新

如果您想要一个响应式卡片组,请使用visibility utils强制在不同视口宽度(断点)上每X列包裹一次…

Bootstrap 4 responsive card-deck(v 4.0.0)

Bootstrap 4 alpha 2的原始答案：

您可以使用网格col – * – *来获得不同的宽度(而不是卡片组),然后使用flexBox将相等的高度设置为cols.

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

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

问题是w / o flexBox启用了卡片组使用表格单元格,因此很难控制宽度.从Bootstrap 4 Alpha 6开始,flexBox是默认的,因此flexBox不需要额外的CSS,而h-100类可用于使卡片全高：http://www.codeply.com/go/gnOzxd4Spk

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