如何使用 bootstrap & laravel 在每行上只创建 4 张卡片 (@foreach)

Question

**@foreach($posts as $post)**

<div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">**{{$post->title}}**</h5>
        <p class="card-text">**{{$post->description}}**</p>
        <p class="card-text">**{{$post->price}}**</p>
    </div>
</div>

**@endforeach**

我想创建 4 张内联卡片来显示所有 post（每行 4 张卡片）。

我试着把过去的代码放在

<div class="card-group">
**here**
</div>

但结果是很多卡片在同一条线上。

使用 bootstrap 和 laravel @foreach 在每行创建已知数量的卡片 (4) 的最佳方法是什么？

Answer 1

使用chunk()方法和嵌套循环：

@foreach($posts->chunk(4) as $chunk)
  <div class="card-group">
    @foreach($chunk as $post)
      <div class="card">...</div>
    @endforeach
  </div>
@endforeach

供参考：https://laravel.com/docs/8.x/collections#method-chunk.

这会将您的 $posts 集合分成 4 个（或更少）一组，然后您可以对其进行迭代，为每个块创建一个 card-group，并为每个块创建一个 card post 块内。

如何使用 bootstrap & laravel 在每行上只创建 4 张卡片 (@foreach)

How can I create only 4 cards on each line using bootstrap & laravel (@foreach)

foreach

frontend

backend

twitter-bootstrap

laravel