Bootstrap 3在每个项目中具有不同高度的网格 – 是否仅使用CSS解决？

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

http://www.bootply.com/iSqwWyx5ms

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

http://www.bootply.com/Wqd021aaeM

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

我知道我可以用JavaScript解决它 – find每一行中最长的缩略图，并设置其他缩略图有这个高度。 问题是，我有什么办法做，或者其他可以解决我的问题，只使用CSS？

更新：我不知道在一行中有多less物品。 例如，在一个小屏幕上，我有一个连续的2个项目，而在一个更大的屏幕上它将是3，所以当一个新的行开始设置的解决scheme对我不好。

Answer 1

您应该使用.clearfix ，如Bootstrap文档的Grid responsive .clearfix部分所述： https ： .clearfix

Answer 2

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

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

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

例：

作者：胡安米格尔

Answer 3

我认为最好使用几行js 。 使用CSS你可以只有一个新的“行”使用clearfix类（如前回答），但每个div将有不同的高度。 如果你想为每个dynamic div设定相同的高度，我想你只能用js来完成。

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

这是一个基于你的代码的工作演示 。

所有你需要做的就是给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

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

在你的情况下，你会改变媒体查询看起来像这样：

 @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，所以你想要每隔四格清除。 992px及以上涉及到md的大小，你有col-md-3，所以你希望每个第六个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 } 

Answer 6

如果您知道您的排列有多less个缩略图，那么您可以使用<div class="row"></div>以三个（或N个）的组合来缩略缩略图。

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

 .thumbnail { height:420px; } 

但是，如果您的缩略图高度和文字可能会有很大的不同，那么它会显得很尴尬或隐藏img /标签的一部分。

Answer 7

你也可以像这样做一个CSS唯一的修补程序。 只需将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 8

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

这是你想要的吗？

PS这将直接限制一个行的边界。