html - Bootstrap 堆叠行中的间隙

Question

我正在构建一个最终将成为投资组合页面的 Bootstrap 3 网格。在下面的 bootply 中，在第一个示例中，您可以看到它在我的 bootply 中从 6 到 4 再到 3 完美堆叠。

但是在第二个示例中，在同一个 bootply 上，有一个元素的拼贴较长，并且在堆叠时会在网格中造成间隙。

最好的 Bootstrap 友好解决方案是什么？非常感谢任何帮助。

Answer 1

有几种方法可以解决这个问题:

1. 为您投资组合中的所有元素设定高度。
2. 使用砖石之类的东西将元素动态地“装入”可用空间。
3. 使用 Grid 中标题为Responsive column resets 的文档中描述的响应类和clearfix 部分。
4. 使用 jQuery 动态调整列高。

如果您的内容是动态生成的，因此您不知道哪些元素会有更长的内容，并且您为不同的断点设置了不同的布局，那么响应式类方法可能难以适应。我用了一个小技巧。在网格中的每个元素之后，我添加了一个 div，我可以应用一个迷你 clearfix 来使用媒体查询。它是额外的标记，但它很好地解决了问题，让我拥有可读和可维护的标记，同时避免使用 javascript 来调整布局。下面是一个使用您的标记的示例:

Updated Bootply

<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-body">
                <a href="#">
                    <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
                </a>
            </div>
            <div class="panel-footer">
                This is text
            </div>  
        </div> 
    </div>
    <div class="clear"></div> <!--Here's the added div after every element-->
  ....
</div> <!--/.portfolio.row-->

CSS:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

如果您更喜欢 jQuery 路由(同样，这假定您已将类“投资组合”添加到包含投资组合元素的行以便于定位):

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});