遗留引导2.3.2生成多个跨度时清除行

时间:2017-02-28 08:54:51

标签: html css twitter-bootstrap

如何为缩略图照片动态生成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;}
}

enter image description here

1 个答案:

答案 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++;
}