Laravel循环位置

Question

如何在laravel 5.4中将我的帖子位置如下图所示

这是我目前的循环：

@foreach ($posts as $post)
    <div class="card">
        <header class="card-header">
            <p class="card-header-title">
                <a href="{{ route('frontshow', $post->slug ) }}">{{ $post->title }}</a>
            </p>
            <a class="card-header-icon">
                <span class="icon">
                    <i class="fa fa-angle-down"></i>
                </span>
            </a>
        </header>
        <div class="card-content">
            <div class="content">
                {{  str_limit($post->body, 100) }}
            </div>
        </div>
    </div>
@endforeach

我希望我的帖子像left-right right-left一样继续。

Answer 1

你可以使用CSS3实际做到这一点：下面是一个例子

.card {
  display: flex;
}

.card + .card {
  margin-top: 10px;
}

.card .card-header {
  height: 100px;
  width: 50%;
  background: grey;
}

.card:nth-child(even) .card-header {
 order: 1
}

<div class="cards">
  <div class="card">
    <header class="card-header">
      <p class="card-header-title">
        <a href="{{ route('frontshow', $post->slug ) }}">Post Title 1</a>
      </p>
      <a class="card-header-icon">
        <span class="icon">
                    <i class="fa fa-angle-down"></i>
                </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        Content goes here
      </div>
    </div>
  </div>
  <div class="card">
    <header class="card-header">
      <p class="card-header-title">
        <a href="{{ route('frontshow', $post->slug ) }}">Post Title 2</a>
      </p>
      <a class="card-header-icon">
        <span class="icon">
                    <i class="fa fa-angle-down"></i>
                </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        Content goes here
      </div>
    </div>
  </div>
  <div class="card">
    <header class="card-header">
      <p class="card-header-title">
        <a href="{{ route('frontshow', $post->slug ) }}">Post Title 3</a>
      </p>
      <a class="card-header-icon">
        <span class="icon">
                    <i class="fa fa-angle-down"></i>
                </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        Content goes here
      </div>
    </div>
  </div>
</div>

Answer 2

使用$i等计数器变量迭代每个项目，然后检查

的结果

$className = $i % 2 === 0 ? 'left-right' : 'right-left';

这将设置适当的班级。

从PHP Manual了解有关Modulo运算符的更多信息。

在刀片方面，它看起来像：

@foreach ($items as $i => $item)
    @if ($i % 2 == 0)
    // left-right
    @else
    // right-left
    @endif 
@endforeach

Answer 3

你可以在循环中使用这样的条件：

@if $loop->index %2 == 0
 // add a css class for even element like 'left-right'
@else
 // add the other css class 'right-left'
@endif