Blade bootstrap foreach 获得漂亮的网格系统

Posted 2023-03-14

【中文标题】Blade bootstrap foreach 获得漂亮的网格系统

【英文标题】：Blade bootstrap foreach get nice-looking grid-system

【发布时间】：2014-04-21 04:32:00

【问题描述】：

我的 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->text) 比其他文本长，因此它们不会总是完美地开始新行，而是附加到最短的先前网格，如您在屏幕截图中所见.

我想要的更像是一个表格，三列，然后是相同高度的新行，包含三个新项目。

所以我正在寻找一种方法

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

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

最好的方法是什么？

【参考方案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>

【讨论】：

谢谢，但很遗憾，array_chunck 没有返回任何内容

我知道为什么： ->toarray() 应该是 ->all()