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

Question

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

http://www.bootply.com/iSqwWyx5ms

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

http://www.bootply.com/Wqd021aaeM

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

我知道我可以用JavaScript解决它 - 找到每行中最长的缩略图并将其他缩略图设置为具有该高度.问题是,我是否有任何方法可以解决我的问题,只使用CSS？

更新:我事先不知道我连续多少件物品.例如,在一个小屏幕上我连续有两个项目,而在一个更大的屏幕上它将是3,所以当新行开始时设置的解决方案对我不利.

Answer 1

您应该使用.clearfix,如Bootstrap文档的Grid响应重置部分所述: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);
  }); 

这是一个基于您的代码的工作演示.

所有您需要做的是给同一类各主要div的同事里面- ,比运行each()在js函数,给他们相同的高度(最高一).

您的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

你可以使用我在这个答案中描述的相同技巧.

在您的情况下,您将媒体查询更改为如下所示:

@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都清除那个大小.这比使用响应式重置更容易,尽管它基于完全相同的前提.

PS我在你的容器里面添加了一个带有行类的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
}