foreach循环与偶数/奇数帖子的不同类

Question

我试图在Laravel的foreach循环中显示奇数和偶数帖子，以及不同的类和子类。我无法在文档中找到任何建议如何在foreach循环中以不同于偶数数据的方式提取奇数数据。

@foreach ($posts as $post)
    <li  class="timeline-inverted">
      <div class="timeline-badge primary" ><a title="{{ $post->created_at }}"><i class="glyphicon glyphicon-time invert" id=""></i></a></div>
      <div class="timeline-panel">
        <div class="timeline-header">
            <div class="row">
                <div class="col-xs-2">
                  <img class="img-responsive img-rounded" src="https://s.gravatar.com/avatar/2efde286ce7b0171a0dfedd1f3cff984?s=80&amp;d=&amp;r=G"">
                </div>
                <div class="col-xs-8">
                  <a> {{ $post->title }} </a> shared 6 hours ago
                </div>
              </div>
        </div>
        <div class="timeline-heading">
          <div class="videowrapper">
              <iframe height="300" src="https://www.youtube.com/embed/4PXXQzME5no" frameborder="0" allowfullscreen=""></iframe>
          </div>
        </div>
        <div class="timeline-body">
          <p>{{ $post->body }}</p>

        </div>

        <div class="timeline-footer">
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="" />
            </a>
            <div class="media-body">
              <p>Comment</p>
              <a href="#">November at 8:15am</a>
            </div>
          </div>
          <hr>
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="" />
            </a>
            <div class="media-body">Comment </div>
          </div>
          <hr>
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="" />
            </a>
            <div class="media-body">Comment </div>
          </div>
        </div>
      </div>
    </li>

    <li>
      <div class="timeline-badge primary" ><a title="11 hours ago via Twitter"><i class="glyphicon glyphicon-time invert" id=""></i></a></div>
      <div class="timeline-panel">
        <div class="timeline-header">
            <div class="row">
                <div class="col-xs-2">
                  <img class="img-responsive img-rounded" src="https://s.gravatar.com/avatar/2efde286ce7b0171a0dfedd1f3cff984?s=80&amp;d=&amp;r=G"">
                </div>
                <div class="col-xs-8">
                  <a> {{ $post->title }} </a> shared 6 hours ago
                </div>
              </div>
        </div>
        <div class="timeline-heading">
          <img class="img-responsive" src="img/img.png" />
          <div class="timeline-images">
            <div class="row">
              <div class="col-xs-4">
                <img src="img/img1.png" class="img-thumbnail img-responsive" />
              </div>
              <div class="col-xs-4">
                <img src="img/img2.png" class="img-thumbnail img-responsive" />
              </div>
              <div class="col-xs-4">
                <img src="img/img3.png" class="img-thumbnail img-responsive" />
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-body">
          <p>{{ $post->body }}</p>             
        </div>
      </div>
    </li>
    @endforeach