Bootstrap row-fluid items collapsing

Question

I can not understand why the images starting from the second row start toppling and do not appear as in the first row?

   <div class="container-fluid">
    <div class="row-fluid">
        <div class="span9 offset3">
        <?php 
        $step = 1;
        do{
        echo <<<EOF
        <div class="span4 {$class}" id="p{$rst_catalog['p_id']}">
        <a href="pillow.php?p_id={$rst_catalog['p_id']}"><img src="images/{$rst_catalog['p_img']}" alt="img" title="{$rst_catalog['p_name']}" /></a>
        <div class="row">
        <div class="span12">
        <a href="pillow.php?p_id={$rst_catalog['p_id']}">{$rst_catalog['p_name']}</a>
        {$rst_catalog['p_rubric']}
        {$rst_catalog['p_price1']}.00 руб.
        </div>
        </div>
        </div> 
        EOF;
        if ($step == 4)
          $step = 11;
        else
          $step++;
        } while ($rst_catalog = mysql_fetch_assoc($res_catalog));
        ?>  
        <?php require_once ("inc/inc_show_pagination.php"); ?>
        </div>
    </div>
</div>

The rest of the code (it is generated through PHP) can be found here

Answer 1

You used margin-left:0 for only first-child thats the issue

Add margin-left: 0 for all id with p1,p4,p7,p10.. It is working

Style:

.left-most{margin-left:0}

<?php
 for($i=0;$i<10;$i++){
    $tst=$i/3;
    if(!is_float($tst)){
        $class='left-most';
    }else{
        $class='';
    }
?>
<div class="span4 <?php echo $class; ?>">Your stuff here</div>

<?php } ?>

Answer 2

I have faced the exactly same behavior.

I suggest you create different rows instead on encapsulating divs inside the same row. Divs inside a row are supposed to occupy only one row ( quite obvious ) that's why all elements have a margin-left. On line break this margin-left is kept, and that's why your divs aren't aligned.

May be you could insert 3 divs per row.

i.e

   <div class="container-fluid">
    <div class="span10 row-fluid">
     <div class="span3"></div>
     <div class="span3"></div>
     <div class="span3"></div>
    </div>
    <div class="span10 row-fluid">
     <div class="span3"></div>
     <div class="span3"></div>
     <div class="span3"></div>
    </div>
    ...
   </div>

Another option is to put divs inside the container. This is will also work as divs are floating.

   <div class="container-fluid">

     <div class="span3"></div>
     <div class="span3"></div>
     <div class="span3"></div>
     <div class="span3"></div>
     <div class="span3"></div>
     <div class="span3"></div>
     ...
   </div>