使用没有 'Masonry' 效果的卡列

Question

目标
A) 整齐的卡片行，没有 'Masonry'-effect
B) 每行的卡片数量取决于屏幕尺寸

我试图通过使用 card-columns 来解决上述问题，但我无法让它按我想要的方式工作（也许 card columns 不是正确的方法？）。

A) 我想要...

A) 我不想要...

B) 下面的代码确实有效（即它改变了每行的卡片数量），但我得到了 'Masonry'-效果。

@media (min-width: 576px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
 }
}

@media (min-width: 768px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media (min-width: 992px) {
  .card-columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

@media (min-width: 1200px) {
  .card-columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
}

Answer 1

首先，如果卡片高度相同（如你的图片所示），卡片（使用card-columns）已经"in neat rows": http://www.codeply.com/go/NyFi3vObhI

更好的解决方案可能是使用 Bootstrap 网格而不是卡片列的 。 card-columns 用于类似砖石结构的布局。网格是响应式的。例如，这个...

<div class="col-xl col-lg-3 col-md-4 col-sm-6"></div>

会让你...

col-xl = xl 上的自动宽度列
col-lg-3 = lg
col-md-4 = md
col-sm-6 = sm
xs 上的 1 列是默认值

http://www.codeply.com/go/DkPRDo4rPb

<div class="container">
    <div class="row">
        <div class="col-xl col-lg-3 col-md-4 col-sm-6 pb-4">
           <div class="card card-block">
                <h2>Card</h2>
                ..
            </div>
        </div>
        <div class="col-xl col-lg-3 col-md-4 col-sm-6 pb-4">
            <div class="card card-block">
                <h2>Card</h2>
                ..
            </div>
        </div>
        <div class="col-xl col-lg-3 col-md-4 col-sm-6 pb-4">
            <div class="card card-block">
                <h2>Card</h2>
                ..
            </div>
        </div>
        <div class="col-xl col-lg-3 col-md-4 col-sm-6 pb-4">
            <div class="card card-block">
                ..
            </div>
        </div>
        ...
    </div>
</div>

注意：如果想要 xl 宽度正好有 5 列，请每 5 列放置一个响应式 div 以强制 "new line"：<div class="w-100 hidden-lg-down"></div>

另一个选项可能是 responsive card-deck。

Answer 2

谢谢！它解决了 'Masonry'-问题，但卡片不符合其大小，看起来还是有点乱。

nb：我无法 post 图片作为评论 => post 编辑为答案。

使用没有 'Masonry' 效果的卡列

Use card columns without 'Masonry'-effect

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4