Laravel9+Bootstrap5实现循环生成Div横向画廊布局问题

1. 布局堆叠的核心原因 #

你把<div class="row">写在了foreach循环内部，导致每个商品都单独生成一行，每行只有一个列，自然会上下堆叠。Bootstrap的栅格系统需要所有列都放在同一个row容器里，它会自动根据屏幕宽度排列和换行。

2. 修正后的代码（Blade语法优化版） #

@extends('master')

@section('content')
<div class="bg-light min-vh-100">
    <div class="container-fluid">
        <div class="px-lg-5 py-4">
            @if(!empty($sql))
                <div class="row">
                    @foreach($sql as $value)
                        <!-- 画廊项 -->
                        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                            <div class="bg-white rounded shadow-sm">
                                <img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="{{ $value->name }}" class="img-fluid card-img-top">
                                <div class="p-4">
                                    <h5>
                                        <a href="#" class="text-dark">{{ $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">库存: {{ $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="fw-bold">R${{ $value->price }}</span></p>
                                        <div class="badge bg-danger px-3 rounded-pill fw-normal">
                                            <span class="text-dark">{{ substr($value->category, 0, 7) }}</span>
                                        </div>
                                        <div class="ms-2">
                                            <a href="" class="btn btn-primary btn-sm">GET</a>
                                        </div>
                                        <div>
                                            <a href="" class="btn btn-primary btn-sm ms-2">GET</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 画廊项结束 -->
                    @endforeach
                </div>
            @endif
            <div class="py-5 text-right">
                <a href="#" class="btn btn-dark px-5 py-3 text-uppercase">加载更多</a>
            </div>
        </div>
    </div>
</div>
@endsection

3. 关键修正点说明 #

• 栅格结构调整：把<div class="row">移到foreach外面，所有商品列都放入同一个row，Bootstrap会自动按col-xl-3/col-lg-4/col-md-6的规则排列，小屏幕自动换行。
• 移除多余样式：删掉float-left，Bootstrap栅格不需要这个，会破坏自动布局。
• Blade语法优化：用Blade的@if、@foreach替代原生PHP标签，更符合Laravel规范；用{{ $value->xxx }}替代<?php echo ?>，更简洁安全。
• Bootstrap5类名更新：把font-weight-bold换成fw-bold，badge-danger换成bg-danger，Bootstrap5对工具类名做了调整。
• 模板结构修正：用@section('content')包裹内容（假设你的master.blade.php里有@yield('content')），避免重复生成<body>标签，符合Laravel模板继承规范。

4. 关于“新增Div重复首个结果”的排查 #

如果数据循环只显示第一条，大概率是控制器里的查询问题：

• 检查是否用了$sql = Model::first()（只取第一条数据），应该改成$sql = Model::get()（获取所有数据）。
• 确认数据库里的$sql数据集是否真的包含多条不同数据，可以用dd($sql)在控制器里打印数据验证。

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