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

Question

我正在尝试在引导程序 4 中实现卡片组功能，以使我所有的卡片都具有相同的高度。

bootstrap 提供的示例显示了 4 张不错的卡片，但无论视口如何，它都是一行中的 4 张卡片。请参阅 此处 的代码。

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

然后我尝试添加一些视口类来打破屏幕尺寸，但是一旦添加了该 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, 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>

原文由 ganders 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2018 年更新

如果您想要一个 响应式卡片组，请使用可见性实用程序强制在不同视口宽度（断点）上的每 X 列换行…

Bootstrap 4 响应 式卡片组（v 4.1 ）

---

Bootstrap 4 alpha 2 的原始答案：

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

 .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/去/gnOzxd4Spk

---

相关问题： Bootstrap 4 - 卡片列中的响应式卡片

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个使用 Sass 的解决方案，用于根据断点配置每行的卡片数量： https ://codepen.io/migli/pen/OQVRMw

它适用于 Bootstrap 4 beta 3

 // Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
        }
    }
}

编辑（2019/10）

我研究了另一个解决方案，它使用 水平列表组 + flex 实用程序 而不是卡片组：

https://codepen.io/migli/pen/gOOmYLb

这是将任何类型的元素组织到响应式网格中的简单解决方案

<div class="container">
    <ul class="list-group list-group-horizontal align-items-stretch flex-wrap">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <!--= add as many items as you need  =-->
    </ul>
</div>

 .list-group-item {
    width: 95%;
    margin: 1% !important;
}

@media (min-width: 576px) {
    .list-group-item {
        width: 47%;
        margin: 5px 1.5% !important;
    }
}

@media (min-width: 768px) {
    .list-group-item {
        width: 31.333%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 992px) {
    .list-group-item {
        width: 23%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 1200px) {
    .list-group-item {
        width: 19%;
        margin: 5px .5% !important;
    }
}

原文由 migli 发布，翻译遵循 CC BY-SA 4.0 许可协议