web-dev-qa-db-ja.com

Laravel:ブレードのforeachループbootstrap列

Foreachループがあり、その中にbootstrap列を持つhtmlが含まれています。

@foreach($address as $add)
    <div class="col-md-6">
        Some data
    </div>
@endforeach

ただし、bootstrapでは、列を作成する前に行divが必要です。これをforeachループに直接配置すると、各col-md-6に行divが作成されます。行divの場合、次のループをスキップして、divの終了タグのみをスローし、そのプロセスを繰り返します。

ループが4回ループする出力例:

<div class="row">
    <div class="col-md-6">
        Some data
    </div>
    <div class="col-md-6">
        Some data
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        Some data
    </div>
    <div class="col-md-6">
        Some data
    </div>
</div>
14

Alexey Mezeninの答えの代わりに、代わりに_array_chunk_を使用できます。 http://php.net/manual/en/function.array-chunk.php

_@foreach(array_chunk($address, 2) as $chunk)
    <div class="row">
        @foreach($chunk as $add)
            <div class="col-md-6">
                Some data
            </div>
        @endforeach
    </div>
@endforeach
_

私は上記をもう少し読みやすくしています。

または、_$address_がコレクションの場合、$address->chunk(2)の代わりにarray_chunk($address, 2)を実行できます。

列の数を変更したい場合は、_2_を必要な列数に変更するだけです。

お役に立てれば!

32
Rwd

$loop変数を使用します

<div class="row">
    @foreach($address as $add)
        <div class="col-md-6">
            Some data
        </div>
        @if ($loop->iteration % 2 == 0)
            </div>
            <div class="row">
        @endif
    @endforeach
</div>
5
Alexey Mezenin

Laravelチャンクをブレードテンプレートで使用できます。

@foreach($products->chunk(3) as $items)
<div class="row">
   @foreach($items as $item)
   <div class="col-md-4 portfolio-item">
      <a href="#">
      <img class="img-responsive" src="{{ 'uploads/'.$item->product_image_url }}" alt="">
      </a>
      <h3>
         <a href="/view-product-details/{{ $item->id }}">{{ $item->product_name }}</a>
      </h3>
      <p>{{ str_limit($item->product_description, 121) }}</p>
   </div>
   @endforeach
</div>
@endforeach

blogpost からコピー。

5
Isuru