时间戳

首页 > 解决方案 > Card-Columns 最低卡数

css - Card-Columns 最低卡数

问题描述

我正在使用媒体查询来响应地显示卡片列。但是，在开始填充下一列（从左到右）之前，每列中似乎至少有 2 张卡片。

如果没有至少 (2*columns - 1) 个卡片要显示，这会导致空白列。

有解决方法吗？我希望在填充第二行之前填充所有列。

https://codepen.io/Vgoose/pen/wjgKPP

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
</div>

造型：

.card-columns {
    column-count: 1;
}
}
@media screen and (min-width: 576px) {
  div.card-columns {
    column-count: 2;
  }
}
@media screen and (min-width: 768px) {
  div.card-columns {
    column-count: 3;
  }
}
@media screen and (min-width: 992px) {
  div.card-columns {
    column-count: 4;
  }
}

标签： cssbootstrap-4

解决方案

恐怕这columns-count不适合这种情况，因为首先填充列的整个高度。基本上它是为文本列创建的。这就是为什么它对你不起作用的原因——如果你增加.card-columnheight 的值，分割.cards会更加不平衡。

在这种情况下，我建议.card在不同的窗口宽度.card上处理宽度，display: inline-block例如（最简单的一个）。

.card-columns {
/*   display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; */
  border: 1px solid #f00;
  font-size: 0;
}
.card {
  width: 100%;
  display: inline-block;
  border: 1px solid #000;
  box-sizing: border-box;
  font-size: 16px;
}
@media screen and (min-width: 576px) {
  .card {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .card {
    width: 33.33%
  }
}
@media screen and (min-width: 992px) {
  .card {
    width: 25%;
  }
}
<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>

  
</div>

当然，还有很多其他的选择，比如 flex 或 css grid，这完全取决于你的目标是什么。

推荐阅读