html - 在每三个元素之后放置广告 - 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
}