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/

实施例：

作者：Juan Miguel

Answer 3

我认为使用js的几行更好。使用CSS，您只能拥有一个新的＆＃34;行＆＃34;使用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都清除那个大小。它比使用响应式重置更容易，尽管它基于完全相同的前提。

P.S。我在容器中添加了一个带有行类的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 only 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

这就是你想要的。??

P.S。这将直接将边界限制为一行。

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

8 个答案: