php - （也许）停止启动 foreach 循环以修复 Bootstrap 结构

Question

我正在尝试使用 foreach 循环获取和显示数据，但是在使用 Bootstrap 4 获得正确的美学方面遇到了问题。

这是我想要实现的布局模型：

这是我当前的标记：

<div class="row justify-content-center">
  <div class="col-12 d-flex flex-row">

    <?php 
      $i = 0;
      foreach( $col as $item ){
        $itle=$item->childNodes[1]->nodeValue;
        if(++$i > 4) break;
    ?>
    
    <?php if ($i == 1) { ?>
    <div class="large d-flex flex-column">
      <span class="title"><?php echo $title; ?></span>
    </div>
    <?php } ?>
    
    <!-- resourceGrid is still in the forloop, so it's rendered three times 
    
    Can I do the following here:
    
    - stop the forloop here
    
    <div class="resourceGrid d-flex flex-column"> so that it's only printed once
    
    - resume the forloop
    -->
    
    <?php if ($i > 1) { ?>
    <div class="resourceGrid d-flex flex-column">
      <div class="small">
        <span class="title"><?php echo $title; ?></span>
      </div>
    </div>
      <?php } ?>


    <?php } ?> <!-- end for each -->
  </div>
</div>

但是，我所有的内容都只是连续吐出（由于flex-row）。我认为解决这个问题的正确方法是在之前停止 for 循环，<div class="small">但其内容将是未定义的。

我希望small内容位于图像所描绘的列中，但不能将列嵌套在另一列中。

解决这个问题的最佳方法是什么？

标签： phphtmlforeachbootstrap-4