当为缩略图动态生成 span4
时,如何清除 bootstrap 2.3.2 中的行?
$.each(data.photos, function(index, value) {
$('#photo').append(
'<div class="span4"> <img src="./assets/imgs/' + value.image + '" alt="..." class="img-rounded"> </div>'
enter code here
);
<div class="row-fluid auto-clear">
<div id="photo"></div>
</div>
试过这个 css 但没有成功
@media (min-width:1200px){
.auto-clear .span1:nth-child(12n+1){clear:left;}
.auto-clear .span2:nth-child(6n+1){clear:left;}
.auto-clear .span3:nth-child(4n+1){clear:left;}
.auto-clear .span4:nth-child(3n+1){clear:left;}
.auto-clear .span6:nth-child(odd){clear:left;}
}
最佳答案
你可以添加一个计数,这样每输出 3 个元素你就可以在代码中添加一个新的 div:
var i = 0;
$.each(data.photos, function(index, value) {
if(i == 3) {
$('#photo').append('<div class="clearfix"></div>');
i = 0;
}
$('#photo')
.append('<div class="span4"> <img src="./assets/imgs/' + value.image + '" alt="..." class="img-rounded"> </div>');
}
i++;
}
关于html - legacy bootstrap 2.3.2 在生成多个跨度时清除行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42504144/