如何使用缩略图bootstrap3每页显示36张图像？

问题描述

我想使用缩略图在每页上显示36张图像，在我的情况下，它显示12张，其他未设置，如照片中所示：

AnnoncesController.PHP

public function index()
    {
        $categories     = Category::all();
        $annonces       = Annonce::all();
                
        return view('annonces.index')->with([
            'categories'     => $categories,'annonces'       => $annonces,]);
    }

index.blade.PHP

 <div class="row mix-grid thumbnails">
                        @foreach($annonces as $annonce)
                            <div class="col-md-3 col-xs-3 mix {{ $annonce->category->slug }} cat_all">
                                <a class="thumbnail-item">
                                    <img src="{{ asset('storage/'.$annonce->image) }}" alt="Nature 1"  />
                                    <div class="thumbnail-info">
                                        <p>Curabitur ut lorem id tellus malesuada tincidunt et eget purus</p>
                                        <button class="btn btn-primary"><span class="fa fa-link"></span></button>
                                        <button class="btn btn-primary"><span class="fa fa-eye"></span></button>
                                    </div>
                                </a>
                                <div class="thumbnail-data">
                                    <h5>{{ $annonce->titre }}</h5>
                                    <p>{!! $annonce->description !!} plus details...</p>
                                </div>                                
                            </div>
                        @endforeach
                        </div>

解决方法

有几种分页项目的方法。最简单的方法是在query builder或Eloquent query上使用paginate方法。 paginate方法会自动根据用户正在查看的当前页面来设置适当的限制和偏移。默认情况下，当前page由HTTP请求上的页面查询字符串参数的值检测到。此值由Laravel自动检测，也自动插入到分页器生成的链接中。

在此示例中，传递给paginate方法的唯一参数是您希望“每页”显示的项目数。在这种情况下，我们指定要在每页显示36个项目：

public function index()
{
    $annonces = Annonce::paginate(36);
            
    return view('annonces.index')->with([
        'annonces'       => $annonces,]);
}

显示分页结果

调用paginate方法时，您将收到Illuminate\Pagination\LengthAwarePaginator的实例。调用simplePaginate方法时，您将收到Illuminate\Pagination\Paginator的实例。这些对象提供了几种描述结果集的方法。除了这些辅助方法之外，分页器实例是迭代器，并且可以作为数组循环。因此，一旦检索到结果，就可以显示结果并使用Blade呈现页面链接：

<div class="container">
    @foreach ($annonces as $annonce)
        {{ $annonce->titre }}
    @endforeach
</div>

{{ $annonces->links() }}

links方法会将links呈现到结果集中的其余页面。这些链接中的每个链接都已经包含正确的page查询字符串变量。请记住，由links方法生成的HTML与Bootstrap CSS框架兼容。