Bootstrap排液項目崩潰

我不明白爲什麼從第二行開始的圖像開始倒塌，並沒有出現在第一行？Bootstrap排液項目崩潰

enter image description here

<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

來源

2013-08-26 Konstantin Rusanov

enter image description here 您使用保證金左：只有first-child 0這就是問題

添加margin-left: 0所有id與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 } ?>

來源

2013-08-26 10:00:43 overflow

我刪除了p1，p4，p7，p10的所有內容，但仍然不起作用。 –

@КонстантинРусанов看到我編輯的答案更詳細。 – overflow

如何將它添加到最左邊的（p1，p4，p7 ...）跨度，如果它們是在一系列php中生成的？ –

我已經面對完全相同的行爲。

我建議你創建不同的行，而不是封裝在同一行內的div。一行內的Div應該只佔用一行（很明顯），這就是爲什麼所有元素都有一個空白左邊。在換行時保留這個空白，這就是爲什麼你的div不對齊的原因。

也許你可以插入每行3格。

即

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

另一種選擇是把div的容器內。這也是可行的，因爲div浮動。

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

來源

2013-08-26 10:25:40 manuvendev

Bootstrap排液項目崩潰

回答

相關問題