php - 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 生成）可以在这里找到

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。

IE

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