引导程序缩略图网格中额外项目之间的间隔

Question

需要如下呈现N个对象的列表：

[Thumbnail 1] [Thumbnail 2] [Thumbnail 3] [Thumbnail 4]
[Thumbnail 5] [Thumbnail 6]

对象的数量N是动态的。为了便于说明，假设在上述情况下N为6，最后两个额外项目（缩略图5，6）之间的间隙与第一行中的间隙一致

然而，我的代码总是像这个一样显示最后一行

[Thumbnail 1] [Thumbnail 2] [Thumbnail 3] [Thumbnail 4]
[Thumbnail 5]               [Thumbnail 6]

你能在最后一行指出如何纠正这种不一致的差距吗？

在我的Django模板中，以下是代码

<div class='row row-flex movie-thumbnails clearfix'>
{% for movie in object_list %}
  <div class='col-md-3'>
  {% include "movie/movie_thumbnail.html" with movie=movie %}
  </div>
  {% cycle '' '' '' '</div><div class="row row-flex movie-thumbnails clearfix">' %}
{% endfor %}
</div>

.row-flex类用于确保所有缩略图具有相同的高度。

Answer 1

令人惊讶的是，答案非常简单。将弹性增长设置为0

.row-flex, .row-flex > div[class*='col-'] {  
    /*display: -moz-box;*/
    /*IE10 only supports the flexbox spec*/
    display: -ms-flexbox;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: -webkit-flex;
    /* NEW, Spec - Firefox, Chrome, Opera */
    display: flex;
    /* flex-shrink is 0 */
    flex:0 0 auto;
}