列在引导5中不会水平对齐

我试图使购物车使用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

p。说到Web开发，我还是个新手，所以请原谅我吧。3

你有一个"row"在每个"列"周围，这意味着每行只有一列。试着把"行"在循环之外，因此多个列落在其中。一行中可以有任意多的列。像这样:

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

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

相关内容

最新更新

热门标签：