Bootstrap 行流体项目折叠答案

【问题标题】：Bootstrap row-fluid items collapsingBootstrap 行流体项目折叠
【发布时间】：2013-08-28 18:48:21
【问题描述】：

我不明白为什么从第二行开始的图像开始倒塌并且不像第一行那样出现？

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

【问题讨论】：

标签： php twitter-bootstrap containers html collapse

【解决方案1】：

You 使用 margin-left:0 仅用于 first-child 这就是问题

为所有带有p1,p4,p7,p10..的ID添加margin-left: 0它正在工作

风格：

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

【讨论】：

如果在一系列php中生成，如何只将其添加到最左边的（p1，p4，p7...）span？
随着你的代码不起作用，网站变白（你可以检查）错误显然是PHP
@Константин Русанов 它正在为您的代码更改上述代码套件。然后添加你的 php 代码。

【解决方案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>

【讨论】：