如何更改 bootstrap 中的布局

Question

我想横向展示我的产品。一行仅显示三张图片，三行仅显示 9 张最新图片。我该怎么做？

blade 文件:

<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

将您的 blade 更改为：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>

在您的控制器中，您可以限制您获得的collection
像这样：

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

最后一个示例如下所示：

Example of display tested

如何更改 bootstrap 中的布局

How to change layout in bootstrap

laravel

eloquent

laravel-5.8