Бутстрапные струйные предметы, обрушивающиеся

Question

Не могу понять, почему изображения, начиная со второй строки, начинают свертываться и не отображаются в первой строке?

<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> 

Остальная часть кода (генерируется с помощью PHP) можно найти here

Answer 1

Вы использовали Левое поле: 0 только для first-child тот вопрос

Добавить margin-left: 0 для всех идентификаторов с p1,p4,p7,p10.. Работает

Стиль:

.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

Я столкнулся с таким же поведением.

Я предлагаю вам создавать разные строки вместо того, чтобы инкапсулировать div внутри той же строки. Разделы внутри строки должны занимать только одну строку (совершенно очевидно), поэтому все элементы имеют margin-left. В строке break это поле осталось слева, и поэтому ваши divs не выровнены.

Может быть, вы можете вставить 3 divs за строку.

т.е.

<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> 

Другим вариантом является положить дивы внутри контейнера. Это также будет работать, поскольку divs плавают.

<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>