每个项目中具有不同高度的 Bootstrap 3 网格 - 仅使用 CSS 可以解决吗？

Question

我正在尝试制作一个缩略图网格，其中每个缩略图都有一个图像和一个标签。如果所有标签的长度相同，它就可以正常工作，因为所有缩略图都具有相同的高度：

http://www.bootply.com/iSqwWyx5ms

但是，如果我缩短最右边的缩略图文本，下面一行的一部分会被推到一个新行中，如下所示：

http://www.bootply.com/Wqd021aaeM

我想要的是第二行从第一行结束的最低点开始。

我知道我可以用 JavaScript 解决这个问题 - 找到每行中最长的缩略图并将其他缩略图设置为具有该高度。问题是，我有什么办法可以解决我的问题，只使用 CSS 吗？

更新：我事先不知道我一排有多少物品。例如，在小屏幕上我会连续显示 2 个项目，而在大屏幕上会是 3 个，因此设置新行开始时设置的解决方案对我不利。

Answer 1

您应该使用.clearfix，如引导文档的网格响应重置部分所述：https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

Answer 2

如果你不知道你有多少列，你可以这样做：

.row.fix {
  display: flex;
  flex-wrap: wrap;
  width:100%; /*not always necessary*/
}

工作小提琴： https://jsfiddle.net/wqdm1jjt/

示例：

作者：胡安·米格尔

Answer 3

我认为最好使用几行js。使用 CSS，您只能使用 clearfix 类（如前所述）创建一个新的“行”，但每个 div 将具有不同的高度。 如果你想为每个动态 div设置相同的高度，我想你只能通过js来做到这一点。

  $(document).ready(function() {
    var maxHeight = 0;          
    $(".equalize").each(function(){
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });         
    $(".equalize").height(maxHeight);
  }); 

这是基于您的代码的working demo。

您所要做的就是为 col-- 中的每个主要 div 赋予相同的类，然后在 js 中运行 each() 函数，赋予它们相同的高度（最大一个）。

您的 HTML 结构应如下所示：

<div class="container">
  <div class="col-md-4">
    <div class="thumbnail equalize">

      <!-- your HTML content -->

    </div> <!-- /.thumbnail equalize -->
  </div> <!-- /.col-md-4 -->
</div> <!-- /.container -->

Answer 4

您可以使用我在此 answer 中描述的相同技巧。

在您的情况下，您可以将媒体查询更改为如下所示：

@media (min-width: 768px) and (max-width: 991px) {
    .portfolio>.clear:nth-child(4n+4)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 992px) {
    .portfolio>.clear:nth-child(6n+6)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

768px - 991px 是 sm 大小，你有 col-sm-2，所以你希望每 4 个 div 清除一次。 992px 及以上与 md 大小有关，其中您有 col-md-3，因此您希望每 6 个 div 以该大小清除。这比使用响应式重置要容易得多，尽管它基于完全相同的前提。

附：我在你的容器内添加了一个带有行类的 div（因为你需要一个在容器内，否则你将在外面有双重填充），我还给它一个投资组合类，以便于定位。这是您更新后的 Bootply。

Answer 5

您可以使用clear: left 并将其应用于行中的每个第一个孩子。例如，如果您有 4 行中的项目，您可以使用：

.my-row>:nth-child(3n+1) {  
  clear:left;
  background-color: red; // just to see if the first item in row is matched
}

Answer 6

你也可以像这样做一个纯 CSS 的 clearfix。只需将auto-clear 添加到row。

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

http://www.codeply.com/go/lUbs1JgXUd

Answer 7

如果您知道缩略图的宽度是多少，那么您可以使用<div class="row"></div> 将缩略图包装成三个（或 N 个）一组。

否则，解决方法是为缩略图元素设置一个固定高度。在你的例子中

.thumbnail {
   height:420px; 
}

但是，如果您的缩略图高度和文本变化很大，那么它会看起来很尴尬或隐藏部分 img/label。

Answer 8

你为什么不使用<div class="row"></div> 看看这个http://www.bootply.com/6bIZkSGcA1

这是你想要的吗？？

附：这将直接将边界限制为一行。