[英]Bootstrap row-fluid items collapsing
I can not understand why the images starting from the second row start toppling and do not appear as in the first row? 我不明白为什么从第二行开始的图像开始倒塌并且没有出现在第一行中?
<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>
The rest of the code (it is generated through PHP) can be found here 其余代码(通过PHP生成)可在此处找到
You used margin-left:0 for only
first-child
thats the issue 您仅将margin-left:0用于
first-child
这就是问题所在
Add margin-left: 0
for all id with p1,p4,p7,p10..
It is working margin-left: 0
添加margin-left: 0
对所有具有p1,p4,p7,p10..
id为margin-left: 0
p1,p4,p7,p10..
Style: 样式:
.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 } ?>
I have faced the exactly same behavior. 我已经面临着完全相同的行为。
I suggest you create different rows instead on encapsulating divs inside the same row. 我建议您创建不同的行,而不是将div封装在同一行中。 Divs inside a row are supposed to occupy only one row ( quite obvious ) that's why all elements have a margin-left .
一行内的Divs应该只占据一行(这很明显),这就是为什么所有元素都具有margin-left的原因 。 On line break this margin-left is kept, and that's why your divs aren't aligned.
在在线休息时,此保证金左保留,这就是为什么div不对齐的原因。
May be you could insert 3 divs per row. 也许您可以在每行插入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>
Another option is to put divs inside the container. 另一种选择是将div放入容器中。 This is will also work as divs are floating.
当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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.