【问题标题】:Card-columns Bootstrap卡片列引导程序
【发布时间】:2018-12-02 11:09:00
【问题描述】:

所以我遇到的问题是,当我生成卡片来填充我的卡片列 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方面做得很差,我还是不习惯。

【问题讨论】:

  • 请您发布您在浏览器中绘制的编译html
  • @NanditaAroraSharma 我不知道这是否是您要求的,但我希望它有助于解决问题
  • 我不熟悉 php,但我仍然尝试使用它和原始 html/css 来回答您的问题。如果它适合你,请尝试

标签: php html css bootstrap-4


【解决方案1】:

使用 col-* 引导类而不是使用列数 css。

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.不要忘记在您的页面上添加rowcontainer 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>

【讨论】:

  • 投反对票的人能告诉我投反对票的原因吗?也许我可以让这个答案更好。谢谢
猜你喜欢
  • 2023-03-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-05-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多