Card-Columns 最低卡数答案

【问题标题】：Card-Columns minimum cardsCard-Columns 最低卡数
【发布时间】：2018-10-09 05:43:04
【问题描述】：

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

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

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

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

【问题讨论】：

我不确定我是否理解这个问题
示例：在超大视口中，我将列数设置为 4。如果我的卡少于 7 张，则不会填充所有 4 列。每列似乎需要至少 2 张卡片才能填充下一列（从左到右）。希望能说明问题。

标签： css bootstrap-4

【解决方案1】：

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

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

.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，这完全取决于你的目标是什么。

【讨论】：