css Bootstrap 5中的列无法水平对齐

qxgroojn 于 2023-01-10 发布在 Bootstrap

关注(0)|答案(2)|浏览(178)

我试图用php和Bootstrap 5创建一个购物车。我指定了类，但是项目仍然垂直堆叠。我希望它彼此并排并水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shopping cart</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="cart.css">
</head>
<body>
        <div class="container">

        <?php

        $connect = mysqli_connect('localhost','root','1234','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)){
                    ?>
                  <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                            <div class="products">
                                <img class="img-fluid" src="<?php echo $product['image']; ?>">
                                <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']; ?>"/>
                                <input type="submit" name="add_to_cart" class="btn btn-info" value="Add to Cart"/>
                            
                            </div>
                        </form>
                    </div>
                    </div>
           
                    <?php 
                }
            }
        }
        ?>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

有没有什么我错过了？？我试过我所知道的T^T的一切
附言。我仍然是一个新手，当谈到网络开发，所以请怜悯我T^T ; 3

css

来源：https://stackoverflow.com/questions/75046755/columns-wont-align-horizontally-in-bootstrap-5

2条答案

按热度按时间

wf82jlnq1#

你有一个“行”围绕每个“列”，这意味着每行只有一列。尝试把“行”外的循环，使多列落在它。你可以有尽可能多的列在一行，你喜欢。类似这样：

<?php

    if ($result) {
        if(mysqli_num_rows($result)>0){
            ?>
            <div class="row">
            <?php
            while($product = mysqli_fetch_assoc($result)){
                ?>
                <div class="col-sm-4 col-md-3">
                    <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                        <div class="products">
                            <img class="img-fluid" src="<?php echo $product['image']; ?>">
                            <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']; ?>"/>
                            <input type="submit" name="add_to_cart" class="btn btn-info" value="Add to Cart"/>
                        
                        </div>
                    </form>
                </div>
                <?php 
            }
            ?>
            </div>
            <?php
         }
    }
    ?>
</div>

赞(0）回复(0）举报 2023-01-10

l0oc07j22#

<?php

if (mysqli_num_rows($result) > 0) {
    echo '<div class="row">';
    while ($product = mysqli_fetch_assoc($result)) {
?>
        <div class="col-sm-4 col-md-3">
            <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                <div class="products">

                    <input type="hidden" name="name" value="<?php echo $product['name']; ?>" />
                    <input type="hidden" name="price" value="<?php echo $product['price']; ?>" />

                    <!-- I think you need rows inside form tag -->
                    
                    <div class="row"> 
                        <div class="col-sm-4 col-md-3">
                            <img class="img-fluid" src="<?php echo $product['image']; ?>">
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h4 class="text-info"><?php echo $product['name']; ?></h4>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h4>$ <?php echo $product['price'];  ?></h4>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <input type="text" name="quantity" class="form-control" value="1" />
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <input type="submit" name="add_to_cart" class="btn btn-info" value="Add to Cart" />
                        </div>
                    </div> <!-- ./row -->
                </div>
            </form>
        </div>
<?php
    } // end while
    echo '</div>';
} // end if

?>

赞(0）回复(0）举报 2023-01-10

我来回答

css Bootstrap 5中的列无法水平对齐

2条答案

相关问题

热门标签

最新问答