divとブートストラップを使ったPHPのページ設定

Question

PHPとTwitter Bootstrapを使って簡単なページ設定を実装しようとしていますが、スタックしてしまいました。

以下

は私のコードです：

<?php foreach($tester as $data): ?> 
<div class="col-sm-2"> 
    <img src="" width="150" height="150"/> 
    <br> 
    <span><?php echo $data['Description'];?></span><br> 
    <span><?php echo $data['Unit_Price'];?></span><br> 
    <span>In Stock:<?php echo $data['Qty'];?></span><br> 
    <span>Arriving Soon:<?php echo $data['In_Transit'];?></span><br> 
    <span>Show All Products In:<?php echo $data['P_Class_Name'];?></span> 
    </div> 
<?php endforeach;?> 

すべてが唯一の問題はのは、すべて、この絵のようにページにいくつかの空のスペースを残して周りを浮遊している私のdiv要素で正常に動作するようです

Answer 1

各要素の後ろにclass="clearfix" divを置くと、浮動小数点の影響を受けない改行を作成する

<?php $i=0; foreach($tester as $data): $i++; ?> 
<div class="col-sm-2"> 
    <img src="" width="150" height="150"/> 
    <br> 
    <span><?php echo $data['Description'];?></span><br> 
    <span><?php echo $data['Unit_Price'];?></span><br> 
    <span>In Stock:<?php echo $data['Qty'];?></span><br> 
    <span>Arriving Soon:<?php echo $data['In_Transit'];?></span><br> 
    <span>Show All Products In:<?php echo $data['P_Class_Name'];?></span> 
    </div> 
    <?php if ($i % 6 == 0) { ?><div class="clearfix"><?php } ?> 
<?php endforeach;?> 

ただし、異なる視点サイズの行ごとに異なる数の要素を表示する必要がある場合は、このソリューションを使用しないでください。