Bootstrap 4.0.0

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网格非常简单的解决方法。您可以调整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>

Answer 6

尝试一下

<div class="container">
    <div class="card-deck">
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
    </div>
</div>

// 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});
        }
    }
}

在Codepen Bootstrap 4 responsive card-deck上进行演示

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

6 个答案:

Bootstrap 4.0.0

Bootstrap 4卡座响应式