在循环内容中行不向上移动

Question

您好我是Bootstrap（和编码）的新用户，我有一些循环内容，它为每个循环（不同的图像高度和文本长度）采用图像和文本来创建4列。但结果并不是我想要的 - 请参阅图片示例[图片显示4列中的img /文本布局]任何帮助或建议都非常感谢！

这是代码示例;

<div class="container-fluid bg-3 text-center">
<div class="row">
  <div class="col-sm-3">
  <some loop code which gets 1 image and 1 set of text>
  </loop>
  </div>
</div>

Answer 1

你需要每次循环的第四次迭代开始一个新行..

$i = 0; //Count

//Start your loops

if($i % 4 === 0) {
 echo '</div><div class="row">';
}

++$i;

Answer 2

我同意你应该每隔4转开一行，但你也应该正确地关闭div的结束标记 这是示例代码

   var i = 0;
for(your logic){
if( i%4 === 0 {
  Append <div class="row">
}
elseif(i%4 !== 0 && i%4 !==3){ 
    Append the following code
 <div class="col-sm-3">
      The image should be here
  </div>

  }     
else if( i%4=== 3){
  Append </div>
}

}