在 php while 循环中引导列答案

【问题标题】：Bootstrap columns in a php while loop在 php while 循环中引导列
【发布时间】：2017-12-09 23:25:34
【问题描述】：

我已经为此阅读了大量不同的想法，但似乎无法让其中任何一个适用于我的代码。目前我的产品显示在单列中，但我希望它们显示在 3 或 4 列网格中。这是我到目前为止的代码，希望有人能看到我哪里出错了。

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) { ?>
        <div class="container"> 
          <div class="col-sm-4">
            <?php echo $row["ID"] . " - " . $row["item"] . "<br>";?>
            <img src="img/<?php echo $row["image"] ?>" style="width:150px;height:150px;"><br>
            <?php echo $row["description"] . " - $" . $row["price"]; ?>
        <form method="post" action="viewcart.php">
            <input type="hidden" name="item" value="<?php echo $row["item"]?>" />
            <input type="hidden" name="price" value="<?php echo $row["price"]?>" />
            <button type="submit">Add To Cart</button>
       </form> 
    </div>
</div>

【问题讨论】：

但容器在while循环之外
是的，为什么循环里面有容器？
必须在 while 循环之外

标签： php bootstrap-4

【解决方案1】：

.container 也在 while 循环中循环，这就是问题所在。正确的格式是：

.container
  .row
    .col-XX-X

将container 和row 放在外面就可以了。

<?php
if ($result->num_rows > 0) {
  echo '<div class="container"><div class="row">'; // You left a row. Change here.
    while($row = $result->fetch_assoc()) { ?>
      <div class="col-sm-4">
        <?php echo $row["ID"] . " - " . $row["item"] . "<br>";?>
          <img src="img/<?php echo $row["image"] ?>" style="width:150px;height:150px;"><br>
          <?php echo $row["description"] . " - $" . $row["price"]; ?>
          <form method="post" action="viewcart.php">
            <input type="hidden" name="item" value="<?php echo $row["item"]?>" />
            <input type="hidden" name="price" value="<?php echo $row["price"]?>" />
            <button type="submit">Add To Cart</button>
        </form> 
      </div>
<?php } ?>
  </div>
</div>

【讨论】：

谢谢@Praveen Kumar！这很好用。我没有使用引导程序或 CSS，因为我已经超越了基本的 HTML，所以这个概念让我忘记了。

【解决方案2】：

将你的容器放在while循环之外：

    if ($result->num_rows > 0) {
       echo '<div class="container">';
        while($row = $result->fetch_assoc()) { ?>
              <div class="col-sm-4">
                <?php echo $row["ID"] . " - " . $row["item"] . "<br>";?>
                <img src="img/<?php echo $row["image"] ?>" style="width:150px;height:150px;"><br>
                <?php echo $row["description"] . " - $" . $row["price"]; ?>
            <form method="post" action="viewcart.php">
                <input type="hidden" name="item" value="<?php echo $row["item"]?>" />
                <input type="hidden" name="price" value="<?php echo $row["price"]?>" />
                <button type="submit">Add To Cart</button>
           </form> 
         </div>
    <?php } // end while loop 
    ?>
       </div>
    <?php } //end if statement 
   ?>

【讨论】：

这是一个错误的代码。请检查 PHP 标签。也解释一下。

【解决方案3】：

如果你想要更多的列，如下所示：

<div class="container">
  <div class="row">
    <div class="col-sm-4">

    </div>
    <div class="col-sm-6">

    </div>
    <div class="col-sm-2">

    </div>
  </div>
</div>

加起来的总列数，必须是12

【讨论】：