Twitter Bootstrap Thumbnail Alignment Issue.

Am having issues with image thumb alignment in the following code The first four thumbnails display correctly but the next four are not in alignment to the first four…

If four images are inside <div class="row-fluid product_listing"> they display correctly before implementing foreach I had image thumbnails hardcoded in each <div class="row-fluid product_listing"> so if I can get the foreach to work that way it will solve the problem. After googling I saw somebody mentioning nested div if someone has Idea please help.




<div class="row-fluid product_listing">

<?php if(!empty($products)) { ?>

<?php foreach($products as $product):?>

<div class="span3">

<div class="item">

<?php

if(!empty($product->images))

foreach($product->images(array('limit' => 1)) as $image)

{

echo CHtml::link(CHtml::image(Yii::app()->request->baseUrl.'/'.$image->image_thumb_path, '',array('class'=>'img')), $product->url);

}else

{

echo CHtml::link('<img class="img" src='.Yii::app()->request->baseUrl.'/uploads/no_images/no_image.jpg  alt="" />', $product->url);

}

?>

<?php echo CHtml::link(CHtml::encode($product->title), $list->url, array('class' => 'title'));?>

</div>

</div>

<?php endforeach; ?> 

</div>



I decided to switch to list view.

https://github.com/twitter/bootstrap/issues/3494#issuecomment-6503590