Question

我试图找到循环新闻列表的最佳方式，唯一的问题是关于新闻的格式。
基本上我使用了boostrap，并且在每一行中我有不同的大小格式，行格式列基本上是这些序列：

   <row>col-6 col-3 col-3</row>
<row>col-4 col-4 col-4</row>
<row>col-6 col-3 col-3 </row>
<row>col-4 col-4 col-4</row>
    ...

并按顺序进行。

我可以弄清楚如何在这些序列中循环，是否有人有同样的问题？

上面我留下了我的html代码示例。

<div class="row latest-news">

  <div class="col-md-6">
    <a href="" rel="bookmark" title="">
      <div class="relative">
        <img src="/images/7.jpg" style="width:100%;" class="" alt="" />
        <div class="feat-wide5-text">
          <span class="feat-cat">Liga</span>
          <h2>Lorem ipsum dolor sit amet</h2>
        </div>
      </div>
    </a>
  </div>

  <div class="col-md-3">
    <a href="" rel="bookmark" title="">
      <div class="relative">
        <img src="/images/7.jpg" style="width:100%;" class="" alt="" />
        <div class="">
          <div class="archive-list-text left relative">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores ipsam eos qui ratione.</p>
          </div>
          <!--archive-list-text-->
        </div>
      </div>
    </a>
  </div>

  <div class="col-md-3">
    <a href="" rel="bookmark" title="">
      <div class="relative">
        <img src="/images/7.jpg" style="width:100%;" class="" alt="" />
        <!--feat-info-wrap-->
        <div class="">
          <div class="archive-list-text left relative">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
          </div>
          <!--archive-list-text-->
        </div>
      </div>
    </a>
  </div>

</div>

<div class="row latest-news">

  <div class="col-md-4">
    <a href="" rel="bookmark" title="">
      <div class="relative">
        <div class="archive-list-img">
          <img src="/images/7.jpg" style="width:100%;" alt="" /> </div>
        <!--feat-info-wrap-->
        <div class="">
          <div class="archive-list-text left relative">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
          </div>
          <!--archive-list-text-->
        </div>
      </div>
    </a>
  </div>

  <div class="col-md-4">
    <a href="" rel="bookmark" title="">
      <div class="relative">
        <div class="archive-list-img">
          <img src="/images/2.jpg" style="width:100%;" alt="" /> </div>
        <!--feat-info-wrap-->
        <div class="">
          <div class="archive-list-text left relative">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
          </div>
          <!--archive-list-text-->
        </div>
      </div>
    </a>
  </div>

  <div class="col-md-4">
    <a href="" rel="bookmark" title="">
      <div class="relative">
        <div class="archive-list-img">
          <img src="/images/3.jpg" style="width:100%;" alt="" /> </div>
        <!--feat-info-wrap-->
        <div class="">
          <div class="archive-list-text left relative">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
          </div>
          <!--archive-list-text-->
        </div>
      </div>
    </a>
  </div>

</div>

我离开这里是我可能的解决方案，但如果是最好的话也不会很好：

 <?php
                                                        $counter = 0;

                                                        $col6 = "col-md-6";
                                                        $col3 = "col-md-3";
                                                        $col4 = "col-md-4";
                                                        ?>
                                                       @foreach($posts as $post)

                                                       <div class="
                                                       @if($counter == 0)
                                                       {{$col6}}
                                                       @elseif ($counter > 0 && $counter< 3)
                                                       {{$col3}}
                                                       @elseif ($counter >= 3)
                                                       {{$col4}}


                                                       @endif
                                                       ">
                                                       {{$counter}}
                                                        </div>

                                                        <?php
                                                        $counter++;

                                                        if($counter== 6){
                                                            $counter=0;
                                                        }

                                                        ?>


                                                       @endforeach

Answer 1

 You can do something like this:

@for($i=0;$i<count($news);$i++)
{
                    <div class="{{ $i % 2 === 0 ? ' col-6' : ' col-4' }}"></div>
                    <div class="{{ $i % 2 === 0 ? ' col-3' : ' col-4' }}"></div>
                    <div class="{{ $i % 2 === 0 ? ' col-3' : ' col-4' }}"></div>
                    <div class="{{ $i % 2 === 0 ? ' col-3' : ' col-4' }}"></div>
}

Answer 2

如果要循环浏览集合，请在刀片视图中使用chunk()方法。它看起来像是：

@foreach ($products->chunk(4) as $chunkIndex=> $chunk)
    <div class="row">    
        @if($chunkIndex % 2 === 0)
            @foreach ($chunk as $productIndex => $product)          
                @if($productIndex === 0)
                    <div class="col-md-6">{{ $product->name }}</div>
                @else
                    <div class="col-md-3">{{ $product->name }}</div>    
                @endif          
            @endforeach
        @else
            @foreach($chunk as $product)
                <div class="col-md-4">{{ $product->name }}</div>            
            @endforeach 
        @endif
    </div>
@endforeach

循环使用不同大小格式的记录

2 个答案: