html - legacy bootstrap 2.3.2 在生成多个跨度时清除行

Question

当为缩略图动态生成 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;}
}

Answer 1

你可以添加一个计数，这样每输出 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++;
}