首页 > 解决方案 > 每行包含 3 列的循环数据

问题描述


我的问题是每行图像划分 3 列: https ://imgur.com/iYWideu

<div id="list-product">
                <div class="row">       
                @foreach($products as $product)
                    <div class="col-lg-4 col-md-4">
                        <a href="{{URL::route('products',['id'=>$product->id])}}">
                            <div class="card">
                                <div class="wrap-img-product">
                                    <img src="{{asset($product->gambar)}}" alt="" class="card-img-top">
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">{{$product->name}}</h5>
                                    <p class="card-text">Rp{{number_format($product->harga_jual)}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
                </div>
            </div>

所以,我希望每个标签行包含 3 列,

标签: phphtmlcsslaravelbootstrap-4

解决方案


只需将您的数据分成 3 个一组并添加一个嵌套循环来迭代每个组的数据。

foreach (array_chunk($products, 3) as $set) {
    echo '<div class="row">';
        foreach ($set as $product) {
            echo '<div class="col-lg-4 col-md-4">';
                ...
            echo '</div>';
        }
   echo '</div>';
}

推荐阅读