【问题标题】：Divs below another with bootstrap 5 and not going to side使用引导程序 5 在另一个下方的 div 并且不会偏向一边
【发布时间】：2022-10-23 14:11:19
【问题描述】：
我正在尝试通过循环对齐一个像画廊一样的 div，
有没有办法用引导程序有效地做到这一点？他们只是彼此之上。我试图制作更多的 div，但它们也重复了 first 的结果。我正在使用 Laravel 9.0 和 Bootstrap 5.0
@extends('master')
<body class="bg-light"></body>
<div class="container-fluid">
<div class="px-lg-5">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="row">
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
<a href="" class="btn btn-primary my-1">GET</a>
</div>
<div>
<a href="" class="btn btn-primary mx-2">GET</a>
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
</div>
</div>
</body>
【问题讨论】：
标签：
php
html
css
laravel
bootstrap-4
【解决方案1】：
<div class="row"> 不应该在 foreach 循环中。如果您在foreach 循环中使用它，则每个项目都有一行。
寻找：
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="row">
...
</div>
<?php
}
}
?>
用。。。来代替：
<div class="row">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
...
<?php
}
}
?>
</div>
在引导程序中，行是主容器。 col 表示容器内的网格。
蛋：
<div class="row">
<div class="col-md-3">
item 1
</div>
<div class="col-md-3">
item 2
</div>
<div class="col-md-3">
item 3
</div>
<div class="col-md-3">
item 4
</div>
</div>
请在这里查看
link
您的错误是循环主容器。
@extends('master')
<body class="bg-light"></body>
<div class="container-fluid">
<div class="px-lg-5">
<div class="row">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
<a href="" class="btn btn-primary my-1">GET</a>
</div>
<div>
<a href="" class="btn btn-primary mx-2">GET</a>
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
</div>
</div>
</body>
看到代码表明您正在使用 foreach 创建更多行。试试我提供的这段代码是否能解决你的问题
<div class="container-fluid"><div class="px-lg-5">
<div class="row">
<?php if (!empty($sql)) {
foreach ($sql as $value) { ?>
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity; ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price; ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr(
$value->category,
0,
7
); ?></span>
</div>
<div>
<a href="" class="btn btn-primary my-1">GET</a>
</div>
<div>
<a href="" class="btn btn-primary mx-2">GET</a>
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php
} ?>
</div>
<div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
你已经在第二行关闭了你的身体标签。
尝试这个：
@extends('master')
<body class="bg-light">
<div class="container-fluid">
<div class="px-lg-5">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="d-flex">
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
<a href="" class="btn btn-primary my-1">GET</a>
</div>
<div>
<a href="" class="btn btn-primary mx-2">GET</a>
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
</div>
</div>
</body>