引導程序縮略圖網格中其他項目之間的間隙

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

令人驚訝的是，答案非常簡單。 將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;
}