2017-08-20 6 views
0

私のウェブサイトのデザインを変更しようとしていますが、好きなように動作しません。3番目の要素ごとに広告を配置する - Laravel Foreach

ウェブサイトの3番目の要素の後に全角divを挿入したいとします。ここで

は、それが今どのように見えるか、私のような絵です:

Thats how it looks now

そして、私はそれになりたい方法のthats:私のコードザッツ

Thats how I want it

@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 

答えて

1

あなたのCSSの下のスタイリングをコピーし、これは、マークされた要素の下に一列になるように配置され、次の行に四番目に配置されます。

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

float:left 
} 
0

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> 

これは間違っています。 Google広告のボックスはメイン部門の外にあり、すべてが期待どおりに機能するはずです。

そうにコードを変更:

@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

関連する問題