Bootstrap 4卡片组,基于视口的列数

Question

我正在尝试在bootstrap 4中实现卡片功能,以使我的所有卡片都具有相同的高度.

bootstrap提供的示例显示4张漂亮的卡片,但无论是视口,它都是4行卡片.请在此处查看codeply .

这对我来说没有意义,因为我认为,为了让你的内容看起来还不错,你需要将卡的最小尺寸缩小.

然后我尝试添加一些视口类来打破屏幕大小,但是一旦添加了div,卡片组就不再适用,因此不会使卡片的高度相等.

我怎样才能完成这项工作？这是缺少的功能,将在Bootstrap 4的完整版本中解决吗？

这是小提琴:https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
        <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

Answer 1

2018年更新

如果你想要一个响应式卡片组,使用visibility utils强制在不同的视口宽度(断点)上每X列包裹...

Bootstrap 4响应式卡片组(4.1版)

Bootstrap 4 alpha 2的原始答案:

您可以使用网格col-*-*来获得不同的宽度(而不是卡片组),然后使用flexbox设置相等的高度到cols.

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2(alpha 2)

问题是w/o flexbox启用了控制宽度变得非常困难的card-deck用途table-cell.从Bootstrap 4 Alpha 6开始,flexbox是默认的,因此flexbox不需要额外的CSS,并且h-100该类可用于使卡完全高度:http://www.codeply.com/go/gnOzxd4Spk

相关问题: Bootstrap 4 - 卡片列中的响应卡

Answer 2

以下是Sass的解决方案,根据断点配置每行卡数:https://codepen.io/migli/pen/OQVRMw

它适用于Bootstrap 4 beta 3

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

Answer 3

我通过min-width在卡片上添加来使其工作：

<div class="card mb-3" style="min-width: 18rem;">
  <p>Card content</p>
</div>

卡片的宽度不会低于此宽度，但仍应正确填充每一行并具有相等的高度。

Answer 4

<div class="w-100 d-lg-none mt-4"></div>

我创建了4张卡，并将此代码放在第二张和第三张卡之间，请尝试此操作。

Answer 5

我已经使用 CSS Grid 来解决这个问题。CSS Grid 将使所有元素在同一行中，所有元素都具有相同的高度。

不过，我还没有考虑使所有行中的所有元素都具有相同的高度。

无论如何，这是如何做到的：

HTML：

<div class="grid-container">

  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS：

.grid-container {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这是一个完整的 JSFiddle。 https://jsfiddle.net/bluegrounds/owjvhstq/4/

Answer 6

这个答案适用于那些使用 Bootstrap 4.1+ 以及那些关心 IE 11 的人

Card-deck 不会根据视口大小调整可见的卡片数量。

以上方法可行，但不支持IE。通过下面的方法，您可以实现类似的功能和响应式卡片。

您可以管理在不同断点处显示/隐藏的卡片数量。

在 Bootstrap 4.1+ 中，默认情况下列的高度相同，只需确保您的卡片/内容使用所有可用空间即可。运行一下片段，你就会明白

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">

                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</div>