Question

我想水平展示我的产品。一行仅显示3张照片，而3行仅显示9张最新照片。我该怎么办？

刀片文件：

<div class="gallery-grids-row">
    <div class="col-md-4">
        @foreach($data as $row)
            <div class="wpf-demo-4">
                <a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">  
                    <img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
                    <div class="view-caption">
                        <p>{{ $row->name }}</p>
                    </div> 
                </a>            
            </div>
        @endforeach
        <div class="clearfix"> </div>
    </div>
    <div class="clearfix"> </div>
</div>

控制器：

public function index()
{
    $data = Post::all();
    return view('index', compact('data'));
}

Answer 1

您可以尝试过滤查询并将结果限制为9或分页。

控制器

public function index()
{
    $data = Post::orderBy('created_at', 'desc')->limit(9)->get();
    return view('home')->with(['data' => $data]);
}

查看

<div class="gallery-grids-row">
    <div class="row">
        @foreach($data as $row)
        <div class="wpf-demo-4 col-md-4">
            <a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">  
                <img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
                <div class="view-caption">
                    <p>{{ $row->name }}</p>
                </div> 
            </a>            
        </div>
        @endforeach
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"> </div>
</div>

最后一个示例如下所示： Example of display without pagination tested

或其他分页

控制器

public function index()
{
    $data = Post::orderBy('created_at', 'desc')->paginate(9);
    return view('home')->with(['data' => $data]);
}

查看

<div class="gallery-grids-row">
    <div class="row">
        @foreach($data as $row)
        <div class="wpf-demo-4 col-md-4">
            <a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">  
                <img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
                <div class="view-caption">
                    <p>{{ $row->name }}</p>
                </div> 
            </a>            
        </div>
        @endforeach
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"> </div>
    {{ $data->links() }}
</div>

最后一个示例如下所示： Example of display tested

Answer 2

将您的刀片更改为此：在foreach顶部一个whole line和每个foreach中的每一行的1/3：

<div class="gallery-grids-row">
    <div class="row"><!-- this changed -->
        @php($index = 0)
        @foreach($data as $row)
            @if($index < 9)
            <div class="wpf-demo-4 col-md-4"><!-- this line changed -->
                <a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">  
                    <img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
                    <div class="view-caption">
                        <p>{{ $row->name }}</p>
                    </div> 
                </a>            
            </div>
            @endif
            @php($index += 1)
        @endforeach
        <div class="clearfix"> </div>
    </div>
    <div class="clearfix"> </div>
</div>

在您的控制器中，您可以限制要获取的集合
像这样：

$data = Post::orderBy('created_at', 'desc')->get(); //this line gets the posts record ordering by date

最后一个示例如下：

Example of display tested

如何在引导程序中更改布局

2 个答案: