如何为缩略图照片动态生成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;}
}
答案 0 :(得分:0)
你可以添加一个计数,这样你输出的每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++;
}