Bootstrap 缩略图网格中额外项目之间的间隙

Posted 2023-02-24

【中文标题】Bootstrap 缩略图网格中额外项目之间的间隙

【英文标题】：Gap between Extra Items in Bootstrap Thumbnail Grid

【发布时间】：2016-04-07 16:32:05

【问题描述】：

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 类是为了确保所有缩略图具有相同的高度。

【问题讨论】：

既然您使用的是 flexbox，您是否尝试过类似以下内容的方法：.thumbnail:last-child margin-right: auto; ？

感谢您的评论！它不影响位置。我还没有使用 flexcontainer。但后来我为所有行创建了一个 flexcontainer。它仍然没有效果。

【参考方案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;