Question

我有一个foreach，我想放置4列，然后在一个新行中打破并重新开始，但由于某种原因，我得到的列号5（test2）坏了像这张图片推送：

problem

应该是这样的：

solution

这是生成该代码的代码：

<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类。）

如果当前计数不是上述计数，则只需回显一列。

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

Bootstrap如何使用内部的列进行foreach

3 个答案: