如何在 css 中使用 foreach 循环

Question

您好，我正在尝试通过在 Laravel 中使用 foreach 循环从数据库中获取数据，我想组织它们 horizontally.I 表示第二组数据旁边的第一组数据。问题是，当我使用卡片或滑块时，它会垂直重新获取数据。如图所示。所以任何人都可以帮助我从数据库中获取数据并水平组织它们吗？！只是想法

当我使用 foreach 循环时看起来像这样：

我想这样横向显示：

这是我在 blade

中使用的代码

                   @endforeach
                        @elseif (count($data ) >2)
                         
     <div class="row">
      <div class="col-sm-3">
      @foreach ($data as $key => $jobs)
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{$jobs->tilte}}</h5>
            <p class="card-text">{{$jobs->final_sub}}</p>
            <a href="#" class="btn btn-primary">Apply</a>
          </div>
        </div>
       
      @endforeach
      </div>
      </div>        
     
    @else

Answer 1

只是改变循环的位置。您可以按以下方式进行：

<div class="row">
  @foreach ($data as $key => $jobs)
  <div class="col-sm-3">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{$jobs->tilte}}</h5>
        <p class="card-text">{{$jobs->final_sub}}</p>
        <a href="#" class="btn btn-primary">Apply</a>
      </div>
    </div>
   </div>   
  @endforeach
</div>

如何在 css 中使用 foreach 循环

how to use foreach loop with css

css

foreach

loops

laravel