Bootstrap 4卡牌桌面单元列响应基于视口？

Question

所以在Bootstrap v4中，我看到卡片组（http://v4-alpha.getbootstrap.com/components/card/#decks）有一个新功能，它可以制作一组卡片，其高度根据组中最高的内容而相同。

看起来列的数量取决于组中的card-div数量。有没有办法根据视口改变列数？例如，宽4个/卡宽，中宽2宽，1宽小？

目前，他们保持相同数量的列/卡宽，直到小于544px。在544px和更高，他们有display: table-cell与screen (min-width: 544px)规则。

有没有办法通过仅更改CSS使基于视口的卡具有不同数量的列？

编辑 - 由于IE支持，希望不使用flex / flexbox

在http://codepen.io/jpost-vlocity/full/PNEKKy/的4个col /卡宽和3 col /卡宽的Codepen示例

Answer 1

我发现使用css-grid非常简单的解决方法。您可以调整250px以适合您的使用案例。

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}

Answer 2

更新2018年

使用card-deck很难设置卡片宽度（响应）因为它使用display:table-cell和width:1%。

我发现使用Bootstap网格col-*中的卡片使它们更容易响应，然后你可以使用网格视口断点。如果您希望卡片的高度与card-deck相同，请启用Bootstrap的flexbox。

http://www.codeply.com/go/6eqGPn3Qud

此外，img-responsive已改为img-fluid

Bootstrap 4.0.0

Flexbox现在是默认设置，但仍然没有受支持的方式来制作响应式卡片组。推荐的方法是在网格内使用卡片：

Responsive cards using grid

另一种制作响应式卡片组的方法是使用每x列的响应式重置div。这将强制卡片在特定断点处换行。

例如：xl上的5，lg上的4，md上的3，sm上的2等。

Responsive card deck demo (4.0.0) Responsive card deck demo (alpha 6) CSS pseudo elements variation

Answer 3

在这里，你去，http://codepen.io/KarlDoyle/pen/pypWbR

最重要的是你必须覆盖样式。如下所示。

.card-deck {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap; 
  align-items: stretch;
}
.card-deck .card {
  display: block;
  flex-basis: 33.3%; /* change this value for each breakpoint*/
}

Answer 4

Bootstrap 4卡牌响应

我尝试使用<container>，<row>和<col>来使其响应，但你失去了

所有牌都有相同的高度

卡片组的功能，如果你这样做。你需要的是CSS：

.card-deck {
  margin: 0 -15px;
  justify-content: space-between;
}

.card-deck .card {
  margin: 0 0 1rem;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card-deck .card {
    -ms-flex: 0 0 48.7%;
    flex: 0 0 48.7%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-deck .card {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
  }
}

@media (min-width: 992px)
{
  .card-deck .card {
    -ms-flex: 0 0 24%;
    flex: 0 0 24%;
  }
}

这是我的CodePen：Bootstrap 4 card deck responsive

Answer 5

只需将h-100类放在网格中的卡片上。

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

<div class="row">
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">1</div>
      <div class="card-footer"></div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">2a <br> 2b <br> 2c</div>
      <div class="card-footer"></div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">3</div>
      <div class="card-footer"></div>
    </div>
  </div>
</div>