html – 引导堆栈行中的间隙

我正在建立一个Bootstrap 3网格,最终将成为一个投资组合页面.在下面的bootply中,在第一个例子中,您可以看到它在 bootply中完美地堆叠在6到4到3之间

然而,在第二个例子中,在同一个bootply中,有一个项目,其中项目的tile更长,并且当堆栈时,它会在网格中造成间隙.

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

解决方法

有几种方法来处理这个问题：

给你的投资组合中的所有元素设置一个高度.
>使用像砖石一样的动态“适合”元素到可用空间.
>使用响应类和clearfix,如文档中的“响应”列标题所述,在Grid秒中复位.
>使用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);
    });
});