15

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

似乎列数取决于组中有多少个card-div。有没有办法根据视口改变列数？比如大宽4列/卡宽，中宽2宽，小宽1？

目前，它们保持相同数量的列/卡片宽度，直到小于 544 像素。在 544px 或更大时，它们display: table-cell符合screen (min-width: 544px)规则。

有没有办法通过仅更改 CSS 来根据视口使卡片具有不同数量的列？

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

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

4

6 回答 6

33

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

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}
于 2018-10-03T19:48:47.283 回答
15

2019 年更新

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

我发现使用 Bootstap 网格内的卡片更容易使它们响应col-*，然后您可以使用网格视口断点。如果您希望卡片与card-deck.

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

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

引导程序 4.0.0

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

使用网格的响应式卡片

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

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

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

于 2016-04-08T12:13:24.000 回答
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">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>

于 2019-03-22T06:12:31.170 回答
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*/
}
于 2016-04-07T22:18:54.377 回答
3

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

于 2018-08-23T12:22:57.587 回答
1

尝试这个

<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 响应式卡片组上演示

于 2019-10-09T12:35:35.883 回答