Php foreach到无序的html列表

Question

我可以制作foreach有序列表，但是使用如此奇怪的东西转向无序的im。我想循环我的对象如下：

我的HTML代码：

<div class="row">
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-1.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-2.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-3.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-4.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
</div><!--//row-->

<div class="row height-20">&nbsp;</div>

<div class="row">
<div class="col-xs-6 col-md-6">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/blog/blog-large-1.jpg">
<div class="large-blog-text"><div class="text">Robin Givhan Returns to The Washington Post Check it out lorem ipsum!</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--/col-xs-6 col-md-6-->
<div class="col-xs-6 col-md-6">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/blog/blog-large-1.jpg">
<div class="large-blog-text"><div class="text">Robin Givhan Returns to The Washington Post Check it out lorem ipsum!</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--/col-xs-6 col-md-6-->
</div><!--//row-->

<div class="row height-20">&nbsp;</div>

<div class="row">
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-1.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-2.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-3.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
<div class="col-xs-6 col-sm-3">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-4.jpg">
<div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--//col-md-3-->
</div><!--//row-->

<div class="row height-20">&nbsp;</div>

<div class="row">
<div class="col-xs-6 col-md-6">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/blog/blog-large-1.jpg">
<div class="large-blog-text"><div class="text">Robin Givhan Returns to The Washington Post Check it out lorem ipsum!</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--/col-xs-6 col-md-6-->
<div class="col-xs-6 col-md-6">
<a href="blog-detail.php" class="anim-opacity">
<img class="img-responsive margin-auto" alt="" src="images/blog/blog-large-1.jpg">
<div class="large-blog-text"><div class="text">Robin Givhan Returns to The Washington Post Check it out lorem ipsum!</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
</a>
</div><!--/col-xs-6 col-md-6-->
</div><!--//row-->

正如你所看到的那样，有一个主行（类类行）和o每个内容都有容器（如果它的4列：col-xs-6 col-sm-3和if 2列：col-xs-6 col -sm-6）

如何使用我的对象数组创建上面的列表？

我做了什么：

<?php
    $open_div = true;

    foreach($content as $key => $val) { 
        if($key > 0 and $key < 4) { 
           $open_div = false;
        } else {
           $open_div = true;
        }  
?> 

<?php 
    if($open_div == true) { 
        $open_div = false; 
?>   
    <div class="row">
<?php 
    } 
?>

    <div class="col-xs-6 col-sm-3">
       <a href="blog-detail.php" class="anim-opacity">
       <img class="img-responsive margin-auto" alt="" src="images/foto-kombin/foto-kombin-1.jpg">
       <div class="blog-image-text"><div class="text">Robin Givhan Returns to The Washington Post</div><div class="user">GÖKHAN ŞAHİNKAYA</div></div>
    </a>
    </div><!--//col-md-3-->

<?php 
     if($open_div == true) { 
?>
    </div><!--//row-->
    <div class="row height-20">&nbsp;</div>
<?php 
    } 
 } // foreach end?>