Bootstrap 4 Image 产品没有正确排列答案

【问题标题】：Bootstrap 4 Image product didn't line up properlyBootstrap 4 Image 产品没有正确排列
【发布时间】：2018-10-19 06:15:48
【问题描述】：

我正在尝试为我的 PHP 培训制作一个简单的在线购物页面。但是，我有点卡在使用 bootstrap 无法实现的 HTML 部分更简单的东西。

代码的结果是让我的产品垂直排列，我想要的就是让它水平排列。

代码：

<div class="container">

<?php
$connect = mysqli_connect('localhost', 'root', '', 'cart');
$query = 'SELECT * FROM products ORDER by id ASC';
$result = mysqli_query($connect, $query);

if ($result):
  if (mysqli_num_rows($result)>0):
    while ($product = mysqli_fetch_assoc($result)):
      //print_r($product);
      ?>
      <div class="col-sm-4">
        <form class="" action="welcome.php?action=add&id=<?php echo $product['id'] ?>" method="post">
          <div class="products">
            <img src="<?php echo $product['image']; ?>" class="img-fluid text-center" />
            <h4 class="text-info"><?php echo $product['name']; ?></h4>
            <h4>$ <?php echo $product['price']; ?></h4>
            <input type="text" name="quantity" class="form-control" value="1" />
            <input type="hidden" name="name" value="<?php echo $product['name'] ?>" />
            <input type="hidden" name="price" value="<?php echo $product['price']; ?>" />
            <button type="submit" name="add_to_cart" class="btn btn-outline-primary">Add to Cart</button>

          </div>
        </form>
      </div>
      <?php
    endwhile;
  endif;
endif;

 ?>

【问题讨论】：

阅读Bootstrap docs。 col-* 必须放在row 中。
天哪！谢谢你。很抱歉这个愚蠢的问题，因为我错过了文档的某些部分。

标签： php html css bootstrap-4

【解决方案1】：

要使引导网格系统正常工作，标签必须按以下顺序排列：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      One of two columns
    </div>
    <div class="col-md-6">
      One of two columns
    </div>
  </div>
</div>

【讨论】：