Bootstrap 4商品无法横向排列问题求助

嘿，我一眼就看出问题所在啦！你现在的商品垂直排列，是因为没有用Bootstrap栅格系统的核心结构——行（row）来包裹列（col）。Bootstrap的栅格布局要求所有列元素必须放在row容器内，这样列才会在水平方向上并排展示，否则每个col-sm-4都会默认占满整行，自然就垂直堆叠起来了。

修改后的完整代码 #

<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): 
    ?>
    <!-- 在这里添加row容器，所有列都要放在里面 -->
    <div class="row">
        <?php while ($product = mysqli_fetch_assoc($result)): ?>
            <div class="col-sm-4 mb-4"> <!-- 加mb-4给每个商品卡片添下边距，更美观 -->
                <form class="" action="welcome.php?action=add&id=<?php echo $product['id'] ?>" method="post">
                    <div class="products p-3 border rounded"> <!-- 加内边距和边框，让卡片更清晰 -->
                        <img src="<?php echo $product['image']; ?>" class="img-fluid mb-3" />
                        <h4 class="text-info"><?php echo $product['name']; ?></h4>
                        <h4>$ <?php echo $product['price']; ?></h4>
                        <input type="text" name="quantity" class="form-control mb-3" 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; ?>
    </div>
    <?php 
            endif; 
        endif; 
    ?>
</div>

额外优化建议 #

• 给每个列添加mb-4类，让商品卡片在垂直方向上有间距，避免挤在一起；
• 给.products添加p-3 border rounded类，把每个商品做成卡片样式，视觉效果更清晰；
• 如果想在更大屏幕上展示更多商品，可以把col-sm-4改成col-md-4 col-lg-3，这样在大屏上一行能放4个商品，小屏保持3个，响应式体验更棒。

内容的提问来源于stack exchange，提问作者Kenken