卡柱式引导

Question

所以我遇到的问题是，当我生成卡片以填充卡片栏div时：

while($row = $categorias->fetch_assoc()) {
  $imagen = $row["Imagen"];
  $categoria = $row["Categoria"];
  echo "<div class='card'>";
  echo "<img class='card-img-top' src='./img/$imagen' alt='$categoria'>";
  echo "<div class='card-body'>";
  echo "<form action='go.php' method='post'>";
  echo "<h5 class='card-title'>$categoria</h5>";
  echo "<input type='hidden' name='producto' id='hiddenField' value='$categoria'>";
  echo "<input class='btn' type='submit' value='ver más'>";
  echo "</form>";
  echo "</div>";
  echo "</div>";
}

它命令它们上下颠倒而不是从左至右排列，这是我用于卡片列的CSS：

/*col-sm*/
@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}
/*col-md*/
@media (min-width: 768px) {
    .card-columns {
        column-count: 2;
    }
}
/*col-lg*/
@media (min-width: 992px) {
    .card-columns {
        column-count: 3;
    }
}
/*col-xl*/
@media (min-width: 1200px) {
    .card-columns {
        column-count: 4;
    }
}

我不得不说，对于CSS来说我很糟糕，我仍然不习惯。

Answer 1

使用function erase(){ result.innerHTML=""; win.innerHTML = winsorloss = 0; loss.innerHTML = winsorloss2 = 0; } 类引导程序，而不是使用列计数CSS。

col-*

PS 。不要忘记在页面上添加while($row = $categorias->fetch_assoc()) { $imagen = $row["Imagen"]; $categoria = $row["Categoria"]; echo "<div class='col-6 col-sm-4 col-md-3'>"; echo "<div class='card mb-2'>"; echo "<img class='card-img-top' src='./img/$imagen' alt='$categoria'>"; echo "<div class='card-body'>"; echo "<form action='go.php' method='post'>"; echo "<h5 class='card-title'>$categoria</h5>"; echo "<input type='hidden' name='producto' id='hiddenField' value='$categoria'>"; echo "<input class='btn' type='submit' value='ver más'>"; echo "</form>"; echo "</div>"; echo "</div>"; echo "</div>"; } 和row div，以使其完美运行。

container