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

Codepen示例4 col/card wide和3 col/card wide http://codepen.io/jpost-vlocity/full/PNEKKy/

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-*,然后您可以使用网格视口断点.如果您希望卡片的高度相同,请启用Bootstrap的flexbox card-deck.

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

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

Bootstrap 4.0.0

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

使用网格的响应卡

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

例如:xl上的5,lg上的4,md上的3,sm上的2等.

响应卡片组演示(4.0.0)
响应卡片组演示(alpha 6)
CSS伪元素变体

Answer 3

只需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">Header 1</div>
      <div class="card-body">Body 1</div>
      <div class="card-footer">Footer 1</div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100">
      <!-- full height -->
      <div class="card-header">Header 2</div>
      <div class="card-body">Body 2 <br> 2a <br> 2b <br> 2c</div>
      <div class="card-footer">Footer 2</div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100">
      <!-- full height -->
      <div class="card-header">Header 3 <br> 3a</div>
      <div class="card-body">Body 3</div>
      <div class="card-footer">Footer 3 <br> 3a </div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100">
      <!-- full height -->
      <div class="card-header">Header 2</div>
      <div class="card-body">Body 2 <br> 2a <br> 2b <br> 2c</div>
      <div class="card-footer">Footer 2</div>
    </div>
  </div>
</div>

Answer 4

你去, 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*/
}