基于视口响应的 Bootstrap 4 卡片组表格单元列？

Question

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

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

目前，它们的列数/卡片宽度保持不变，直到小于 544 像素。在 544 像素或更高时，它们具有 display: table-cell 和 screen (min-width: 544px) 规则。

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

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

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

Answer 1

给你， 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 2

2019 年更新

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

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

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

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

引导程序 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

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 4

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

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

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">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 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