每三个元素之后放置广告 - Laravel Foreach

Question

我试图改变我网站的设计，但它并不像我想要的那样工作（就像所有的一样）。

我想在我的网站上每隔三个元素后放置一个完整的宽度div。

这是一张像我现在的样子：

这就是我想要的：

这是我的代码：

@foreach($usergroups as $group)
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="jumbotron" id="jumbo">
            // Content of the black boxes
        </div>
        @if($counter % 3 == 0)
            <div class="col-md-12">
                // content of the red boxed ( Ad's by google )
            </div>
        @endif
    </div>
    <?php $counter-- ?>
@endforeach

Answer 1

在css中复制下面的样式，这会将下面标记的元素对齐为单行，然后在下一行中放入第四行。

.col-xs-12 .col-sm-6 .col-md-4{

float:left
}

Answer 2

amit“解决方案”不正确。

问题在于您的HTML。我假设你使用bootstrap（基于CSS标签）。

当您的刀片生成HTML时，它看起来像：

<div class="col-xs-12 col-sm-6 col-md-4">
    <div class="jumbotron" id="jumbo">
        // Content of the black boxes
    </div>
    <div class="col-md-12">
        // content of the red boxed ( Ad's by google )
    </div>
</div>

这是错误的。 Google广告框应该在主要div之外，并且所有内容都可以按预期工作。

所以将代码更改为：

@foreach($usergroups as $group)
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="jumbotron" id="jumbo">
            // Content of the black boxes
        </div>
    </div>
    @if($counter % 3 == 0)
        <div class="col-md-12">
            // content of the red boxed ( Ad's by google )
        </div>
    @endif
    <?php $counter-- ?>
@endforeach

请注意红框div在外面。

顺便说一句，你不需要反击。 Laravel有$loop变量。请参阅：The Loop Variable