Question

目标
A）整齐的牌，没有'砌体'效果
B）每行不同数量的卡片，具体取决于屏幕尺寸

我试图通过使用card-columns来解决上述问题，但我无法按照我的意愿去工作（也许card columns不是要走的路？）。

A）我想......

A）我不想......

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

@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）已经是＆＃34;整齐的行＆＃34; 34;：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上的4列
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个cols，请每隔5列放置一个响应div以强制执行＆＃34;新行＆＃34;：<div class="w-100 hidden-lg-down"></div>

另一种选择可能是responsive card-deck。

Answer 2

谢谢！它解决了'砌体'问题，但卡片并没有坚持它的'尺寸，它看起来仍然有点乱。

nb：我无法将图片发布为评论=＆gt;张贴为答案。

使用没有'砌体'效果的卡片列

2 个答案: