刀片引导程序foreach得到漂亮的网格系统

Question

我在Laravel的Blade视图中有这段代码：

@foreach ($questions as $question)
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
  @if(isset($question->task))
   <a href="{{URL::action('showTask', $question->task_id)}}"><h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4></a>
  @endif


  <blockquote >
    <a class="nostyle" href="{{URL::action('showQuestion',$question->id)}}" ><p

        @if($question->status==1)
          class="text-success"
        @endif
      >{{$question->text}}</p></a>
  <footer>Gevraagd door <strong>{{$question->Author->getFullName('mij') }}</strong> op <strong>{{DateConverter::dateToString($question->created_at)}}</strong></footer>

  @if($question->status==1)
    <span class="label label-success">Beantwoord</span>
  @endif 
</blockquote>

</div>
  @endforeach

显示所有问题。我希望它们以漂亮的3行显示。但是，有些文本（ $ question-＆gt; text ）比其他文本更长，因此它们并不总是完美地开始新行，而是追加到最短的前一个网格，正如您在屏幕截图。

我想要的更像是一张桌子，三列，然后是一个同一高度的新行，有三个新项目。

所以我正在寻找一种方法

• 要么返回所有相同高度的列

• 或在每三列之后自动添加和关闭行div。

  最好的方法是什么？

Answer 1

您可以尝试这样的事情：

@foreach(array_chunk($questions->all(), 3) as $threeQuestions)
    <div class="row">
        @foreach($threeQuestions as $question)
            // Do everything here
            @if(isset($question->task))
                <a href="{{URL::action('showTask', $question->task_id)}}"><h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4></a>
            @endif

            // ...

        @endforeach
    </div>
@endforeach

此处，$threeQuestions每次迭代包含三个项目，因此.row会将每个项目保持在div内，如下所示：

<div class='row'>
    item-1
    item-2
    item-3
</div>
<div class='row'>
    item-4
    item-5
    item-6
</div>