Question

我已经为此阅读了大量不同的想法，但似乎无法使其中任何一个能够用于我的代码。目前我的产品以单一列显示，但我希望它们显示在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>

Answer 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>

Answer 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 
   ?>

Answer 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

在php while循环中的Bootstrap列

3 个答案: