python - Bootstrap缩略图网格中其他元素之间的间隙

需要呈现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类用于确保所有缩略图具有相同的高度。

最佳答案

令人惊讶的是，答案非常简单。将flex-grow设置为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;
}

关于python - Bootstrap缩略图网格中其他元素之间的间隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34584768/