Bootstrap行液物品坍塌

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

您使用了margin-left：0仅用于问题的first-child

为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 } ?>

Answer 2

我遇到了完全相同的行为。

我建议您在同一行内封装div时创建不同的行。一排内的Div应该只占据一行（非常明显），这就是为什么所有元素都有 margin-left 的原因。在线休息时，保留左边距，这就是你的div没有对齐的原因。

可能每行可以插入3个div。

即

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