Laravel如何在12列Bootstrap网格中循环展示不等宽产品列？

下面提供几种实用的实现方式，基于主流的12列栅格系统（比如Bootstrap）来完成布局：

方法一：预设列宽循环复用 #

提前定义一组符合总和12的不等宽组合，通过循环索引复用这组列宽，让产品按固定的不等宽规则排列：

@php
    // 自定义列宽组合，数值总和需符合12栅格规则，可按需调整
    $colWidths = [8, 4, 6, 3, 3, 9, 3];
    $itemIndex = 0;
@endphp

<div class="row">
    @foreach($products as $product)
        @php
            // 循环复用列宽数组
            $currentCol = $colWidths[$itemIndex % count($colWidths)];
            $itemIndex++;
        @endphp
        <div class="col-{{ $currentCol }} mb-4">
            <div class="product-card">
                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="img-fluid">
                <h5>{{ $product->name }}</h5>
                <p>${{ $product->price }}</p>
            </div>
        </div>
    @endforeach
</div>

方法二：根据产品属性动态分配列宽 #

根据产品的业务属性（比如是否热门、分类等），动态给不同产品分配对应列宽，实现差异化布局：

<div class="row">
    @foreach($products as $product)
        @php
            // 示例：热门产品占8列，普通产品占4列（8+4=12，填满一行）
            $colClass = $product->is_hot ? 'col-8' : 'col-4';
            // 可扩展：根据分类分配不同列宽
            // $colClass = match($product->category_id) {
            //     1 => 'col-6',
            //     2 => 'col-3',
            //     default => 'col-3'
            // };
        @endphp
        <div class="{{ $colClass }} mb-4">
            <div class="product-card">
                <img src="{{ $product->image_url }}" alt="{{ $product->name }}">
                <h5>{{ $product->name }}</h5>
                <p>{{ $product->price }}</p>
            </div>
        </div>
    @endforeach
</div>

方法三：分组实现多行差异化不等宽 #

通过chunk()方法将产品分组，每组对应一套不等宽规则，实现多行不同的布局样式：

@php
    // 按数量分组，比如每2个产品一组、每3个产品一组
    $productGroups = $products->chunk(2);
    // 对应每组的列宽规则
    $groupColRules = [['8','4'], ['6','3','3']];
    $groupIndex = 0;
@endphp

@foreach($productGroups as $group)
    <div class="row mb-4">
        @foreach($group as $key => $product)
            <div class="col-{{ $groupColRules[$groupIndex % count($groupColRules)][$key] }}">
                <div class="product-card">
                    <img src="{{ $product->image_url }}" alt="{{ $product->name }}">
                    <h5>{{ $product->name }}</h5>
                    <p>{{ $product->price }}</p>
                </div>
            </div>
        @endforeach
        @php $groupIndex++; @endphp
    </div>
@endforeach

注意事项 #

1. 确保项目中使用了支持12列栅格的CSS框架（如Bootstrap），如果是自定义样式，需自行实现col-N的宽度逻辑（比如col-8对应宽度calc(8/12*100%)，配合Flex或浮动布局）。
2. 可添加响应式类（如col-md-8、col-sm-6）适配不同屏幕尺寸。
3. 若最后一组产品数量不足，可根据需求调整列宽或补全空白列保证布局美观。

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