Bootstrap 如何使用里面的列进行 foreach

Question

我有一个 foreach，我想放置 4 列，然后换成新行并重新开始，但由于某种原因，我得到了列号 5(test2) 的错误推送，如下图所示：

应该是这样的：

这是生成它的代码：

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
              <div class="panel-heading">
                  Secciones
              </div>
              <div class="panel-body">
                   <div class="row">
                      @foreach ($boards as $board)
                          <div class="col-md-3">
                              <h3>{{$board->boaName}}</h3>
                              @foreach ($subboards as $subboard)
                                  @if($subboard->boaId == $board->id)
                                    <ul>
                                        <li><a href="">{{$subboard->subboaName}}</a></li>
                                    </ul>
                                  @endif
                              @endforeach
                          </div>
                      @endforeach
                  </div>
              </div>
          </div>
        </div>
    </div>
</div><!--End container-->

Answer 1

尝试将foreach 循环移到<div class="row"> 之外？如果这不起作用，您认为您可以在 jsFiddle 示例中对此进行模拟吗？

Answer 2

您需要在 4 次迭代后进行测试才能关闭并再次打开行 div。

Answer 3

如果您知道预期有多少列，您可以执行以下操作（在我的示例中，我省略了每列的内部内容 - 我还保留了计数器，以便您可以看到用于测试的增量）：

$i = 1;
foreach($boards as $board) {
    if($i == 1 || $i == 5 || $i == 9) {
        echo "<div class='row'>";
        echo "<div class='col-md-3'>" . $i++ . "</div>";
    }
    elseif($i%4 == 0) {
        echo "<div class='col-md-3'>" . $i++ . "</div>";
        echo "</div>";
    } else {
        echo "<div class='col-md-3'>" . $i++ . "</div>";
    }
}

这里发生的情况是，如果列数是第 4 次迭代，它应该回显一个开头 <div class="row"> 以及一列。如果当前列可以被 4 整除，则它应该回显一个带有额外关闭 </div> 的列（以关闭 row 类。）

如果当前计数都不是以上，它只是简单地回显一列。

如果潜在列的数量未知，您当然可以修改上述内容。