使用css/bootstrap设置多个图像的样式

我试图在我的预订系统中显示多个图像，但这些图像仅显示在一列中，如下所示

而这正是我所期望的 到目前为止，我正在使用引导来设置图像的样式。 我想循环返回的图像，在第一行显示前三个，然后在下一行显示第二个四个，显示最后一行最后一列中隐藏的所有图像的数量，就像在图像中一样

到目前为止，这就是我能够做到的

     <div class="card-body">
        <div class="portfolio-area">
            
            @foreach ($images as $image)
            <div>
                <span class="image-block block2">
                <a class="image-zoom" href="{{ asset('uploads/property/large/'.$image->path) }}" rel="prettyPhoto[gallery]">                            
                        <img src="{{ asset('uploads/property/small/'.$image->path) }}" class="img-responsive" alt="CEC Gallery"></a>
            </span>
            </div>
            @endforeach
        </div>
    </div>

---

非常感谢您对我如何循环浏览和设置图像样式的任何帮助。

非常简单。。首先，您需要使用laravel区块访问：

---

然后你需要两种类型的设计，你已经展示过了。

你介意告诉我如何在我的案例中使用这种设计吗？因为我不太熟悉这种方法。这种方法有助于你在网格中显示。我已经能够将它们分块，但我如何才能引入第二种设计？分块之后，我正在遍历块，如图所示：``@foreach（$item的图像）@endforeach``好的。这是一个简单的技巧{{--foreach（$key=>chunk\\\}}{{--}}{{--foreach（$example=chunk\\\$variable）--}{{--if（$key==0）这里是你的第一个设计

--}{{--else--}{{p>这里是你的第二个设计{{--@endif--}{{--@endforeach--}{{--}{{--}{--@endforeach--}}{{--@endforeach--}}

    $images = Photo::where(['p_id'=>$property_id])->get();