没有并排列

Question

我有一个应该在 bootstrap 网格中显示产品的容器，但我只得到一列而不是并排显示。

<div class="container">
    <div class="row text-center py-5">
        <div class='col-md-3 col-sm-3 my-3 my-md-0'>
            <form action='index.php' method='post' id='myform'>

                <?php
                $result = $database->getData();
                while ($row = mysqli_fetch_assoc($result)) {
                    component($row['product_name'], $row['product_price'], $row['product_image'], $row['id']);
                }
                ?>

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

Answer 1

您的代码中只有 1 列，您应该在循环中包含 col* div，如下所示：

<form action='index.php' method='post' id='myform'>
  <div class="container">
    <div class="row text-center py-5">
      <?php
      $result = $database->getData();
      while ($row = mysqli_fetch_assoc($result)) {
      ?>
      <div class='col-md-3 col-sm-3 my-3 my-md-0'>
        <?php component($row['product_name'], $row['product_price'], $row['product_image'], $row['id']); ?>
      </div>
      <?php } ?>
    </div>
  </div>
</form>

Answer 2

<div class="container">
    <div class="row text-center py-5">
            <form action='index.php' method='post' id='myform'>

                <?php
                $result = $database->getData();
                while ($row = mysqli_fetch_assoc($result)) {
                ?>
                  <div class='col-md-3 col-sm-3 my-3 my-md-0'>
                 <?php
                    component($row['product_name'], $row['product_price'], 
                    $row['product_image'], $row['id']);
                }
                ?>
                 </div>
            </form>
        
    </div>
</div>

没有并排列

not getting columns side by side

html

php

grid-layout

bootstrap-4