php - 卡片列 Bootstrap

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

不使用列数 css，而是使用 col-* 类的 Bootstrap 。

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

P.S. 不要忘记在页面上添加 row 和 container div，以使其完美运行。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class='col-6 col-sm-4 col-md-3'>
      <div class="card mb-2">
        <img class='card-img-top' src='./img/$imagen' alt='$categoria'>
        <div class='card-body'>
          <form action='go.php' method='post'>
            <h5 class='card-title'>$categoria</h5>
            <input type='hidden' name='producto' id='hiddenField' value='$categoria'>
            <input class='btn' type='submit' value='ver más'>
          </form>
        </div>
      </div>
    </div>
    <div class='col-6 col-sm-4 col-md-3'>
      <div class="card mb-2">
        <img class='card-img-top' src='./img/$imagen' alt='$categoria'>
        <div class='card-body'>
          <form action='go.php' method='post'>
            <h5 class='card-title'>$categoria</h5>
            <input type='hidden' name='producto' id='hiddenField' value='$categoria'>
            <input class='btn' type='submit' value='ver más'>
          </form>
        </div>
      </div>
    </div>
    <div class='col-6 col-sm-4 col-md-3'>
      <div class="card mb-2">
        <img class='card-img-top' src='./img/$imagen' alt='$categoria'>
        <div class='card-body'>
          <form action='go.php' method='post'>
            <h5 class='card-title'>$categoria</h5>
            <input type='hidden' name='producto' id='hiddenField' value='$categoria'>
            <input class='btn' type='submit' value='ver más'>
          </form>
        </div>
      </div>
    </div>
    <div class='col-6 col-sm-4 col-md-3'>
      <div class="card mb-2">
        <img class='card-img-top' src='./img/$imagen' alt='$categoria'>
        <div class='card-body'>
          <form action='go.php' method='post'>
            <h5 class='card-title'>$categoria</h5>
            <input type='hidden' name='producto' id='hiddenField' value='$categoria'>
            <input class='btn' type='submit' value='ver más'>
          </form>
        </div>
      </div>
    </div>
    <div class='col-6 col-sm-4 col-md-3'>
      <div class="card mb-2">
        <img class='card-img-top' src='./img/$imagen' alt='$categoria'>
        <div class='card-body'>
          <form action='go.php' method='post'>
            <h5 class='card-title'>$categoria</h5>
            <input type='hidden' name='producto' id='hiddenField' value='$categoria'>
            <input class='btn' type='submit' value='ver más'>
          </form>
        </div>
      </div>
    </div>
    <div class='col-6 col-sm-4 col-md-3'>
      <div class="card mb-2">
        <img class='card-img-top' src='./img/$imagen' alt='$categoria'>
        <div class='card-body'>
          <form action='go.php' method='post'>
            <h5 class='card-title'>$categoria</h5>
            <input type='hidden' name='producto' id='hiddenField' value='$categoria'>
            <input class='btn' type='submit' value='ver más'>
          </form>
        </div>
      </div>
    </div>
    <div class='col-6 col-sm-4 col-md-3'>
      <div class="card mb-2">
        <img class='card-img-top' src='./img/$imagen' alt='$categoria'>
        <div class='card-body'>
          <form action='go.php' method='post'>
            <h5 class='card-title'>$categoria</h5>
            <input type='hidden' name='producto' id='hiddenField' value='$categoria'>
            <input class='btn' type='submit' value='ver más'>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>