Html 在每三个元素后面放置广告-Laravel Foreach

我正试图改变我的网站设计，但它没有像我想要的那样工作（就像所有的方式）

我想在我的网站上的每三个元素后放置一个全宽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

@foreach（$usergroups作为$group）
//黑匣子的内容
@如果（$counter%3==0）
//红盒内容（谷歌广告）
@恩迪夫
@endforeach

在css中复制样式下方，这将在标记元素下方对齐，使其成为单行，然后将第四行放在下一行

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

float:left
}

amit“解决方案”不正确

问题在于你的HTML。我假设您使用引导（基于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>

//黑匣子的内容
//红盒内容（谷歌广告）

这是错误的。谷歌广告盒应该在主分区之外，一切都会按预期运行

因此，请将代码更改为：

@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

@foreach（$usergroups作为$group）
//黑匣子的内容
@如果（$counter%3==0）
//红盒内容（谷歌广告）
@恩迪夫
@endforeach

注意，红色盒子div在外面

顺便说一句，你们不需要柜台。Laravel有

$loop

变量。见：