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

Question

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

bootstrap提供的示例显示4张漂亮的卡片，但无论是视口，它都是4行卡片。请参阅codeply here。

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

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

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

<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列包裹一次...

Kazkhsvpoi（4.1）

Bootstrap 4 alpha 2的原始答案：

你可以使用网格Bootstrap 4 responsive card-deck来获得不同的宽度（而不是卡片组），然后使用flexbox设置相等的高度。

col-*-*

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

问题是w / o flexbox启用http://codeply.com/go/O0KdSG2YX2使用card-deck，它变得很难控制宽度。从Bootstrap 4 Alpha 6开始，flexbox是默认的，因此flexbox不需要额外的CSS，而table-cell类可用于使卡片全高：h-100

相关问题：http://www.codeply.com/go/gnOzxd4Spk

Answer 2

以下是Sass的解决方案，根据断点配置每行卡数：Bootstrap 4 - Responsive cards in card-columns

它适用于Bootstrap 4 beta 3

https://codepen.io/migli/pen/OQVRMw

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

我创建了4张卡并将此代码放在第二张和第三张卡之间，试试这个。

Answer 4

我通过在卡上添加<div class="w-100 d-lg-none mt-4"></div>来实现这一点：

min-width

卡片不会低于这个宽度，但仍能正确填充每一行并具有相同的高度。

Answer 5

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

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

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

Answer 6

有更简单的解决方案 - 设置卡元素的固定高度 - 标题和正文。这样，我们可以使用标准引导列网格设置响应式布局。

这是我的例子：<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-xs"> <div class="card h-100"> content-goes-here </div> </div> <div class="col-sm-4"> <div class="card h-100"> content-goes-here<br> content-goes-here<br> content-goes-here<br> </div> </div> <div class="col-sm-4"> <div class="card h-100"> content-goes-here </div> </div> </div> </div>

http://codeply.com/go/RHDawRSBol

Answer 7

我花了一些时间来解决这个问题，但答案是不使用卡牌，而是使用<div class="card-deck text-center"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="card mb-4"> <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap"> <div class="card-body" style="height: 20rem"> <h4 class="card-title">1 Card title</h4> <p class="card-text">This is a longer 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>和.rows。

这会产生一组响应性的卡片，每个屏幕尺寸都有详细信息：.col有3张卡片，xl和lg有2张卡片，md和sm有1张卡片。 xs在顶部和底部放置衬垫，使它们看起来很漂亮。

.my-3

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

问题描述投票：37回答：7

7个回答

最新问题

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

问题描述 投票：37回答：7

7个回答

最新问题

问题描述投票：37回答：7