画廊除以 4答案

【问题标题】：Divide by 4 for gallery画廊除以 4
【发布时间】：2019-03-05 09:59:56
【问题描述】：

很抱歉在这里提问，但我似乎无法理解我需要做什么才能完成此任务。我有一个从数据库中提取的画廊，我想要它，所以每个 4 分区都会添加一个新行。这是我的网站：https://creativehedgehog.co.uk/gallery

即

<div class="row">
col3
col3
col3
col3
</div>

这是正确的吗？这是我的代码

<div class="gallery-container">
    <div class="gallery cf">
        @php
            $i=0;
        @endphp
        @foreach($galleries as $gallery)
            @if($i % 4 == 0)
                {{$i}}
                <div class="row">
            @endif

                <div class="col-md-3">
                    <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                        <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                    </a>
                </div>
            @if($i % 4 == 0)
                        {{$i}}
                </div>
            @endif

            @php
                $i++;
            @endphp


        @endforeach

    </div>
</div>

【问题讨论】：

我通过检查您网站上我的浏览器中的 HTML 发现了您每第四次迭代生成一行的问题，它是查找此类小错误的强大工具。在 chrome 上它被称为 DevTools，如果你还没有看过它，我会推荐它，它让 webdev 的生活变得更加轻松。

标签： php html laravel twitter-bootstrap bootstrap-4

【解决方案1】：

使用 array_chunk 函数。 array_chunk

<div class="gallery-container">
        <div class="gallery cf">
        @foreach(array_chunk($galleries,4,true) as $chank)

           <div class="row">

            @foreach($chank as $gallery)
                    <div class="col-md-3">
                        <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                            <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                        </a>
                    </div>
            @endforeach
            </div>
            @endforeach;

        </div>
    </div>

【讨论】：

【解决方案2】：

试试这个，让引导 flexbox 完成他们的工作

<div class="gallery-container">
   <div class="gallery cf">
     <div class="container-fluid">
       <div class="row">

        @foreach($galleries as $gallery)
                <div class="col-md-3">
                    <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                        <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                    </a>
                </div>
        @endforeach
        </div>
      </div>
    </div>
</div>

【讨论】：

【解决方案3】：

您每第四次迭代添加一个行元素，而不是在每行中放置 4 次迭代。

往下看：

<div class="gallery-container">
    <div class="gallery cf">
        @php
            $i=0;
        @endphp
        @foreach($galleries as $gallery)
            @if($i % 4 == 0)
                @if($i != 0)
                    </div>
                @endif
                {{$i}}
                <div class="row">
            @endif

                <div class="col-md-3">
                    <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                        <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                    </a>
                </div>

            @php
                $i++;
            @endphp


        @endforeach
        </div><!-- last row end -->
    </div>
</div>

【讨论】：