Bootstrap的差距堆积了行

Question

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

但是在第二个示例中,在同一个bootply中,有一个项目,其中项目的tile更长,并且在堆叠时会在网格中产生间隙.

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

Answer 1

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

1. 为您的投资组合中的所有元素设置一个设定的高度.
2. 使用类似砌体的东西将元素动态"拟合"到可用空间中.
3. 使用响应类和clearfix,如网格版本中的响应列重置标题下的文档中所述.
4. 使用jQuery动态调整列高.

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

更新了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);
    });
});

Answer 2

Bootstrap"only"方法是使用Bootstrap .clearfix.你必须每隔x个列迭代一次,所以在你的情况下,clearfixdiv将放在第6 列之后col-lg-2.这适用于lg屏幕宽度..

http://www.bootply.com/SV0kI3TSN3

但是,由于您使用了多种响应断点,你需要放置clearfix在md与xscolums包了.这将防止所有屏幕宽度的间隙.

http://www.bootply.com/3TsF0arPRS

2017年更新

1 - 如上所述,'clearfix'方法(由Bootstrap推荐)就像这样(需要每x列迭代一次).这将强制每3列包裹一次

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix演示(单层)

Clearfix演示(响应层)

还有一个仅限CSS的"clearfix"变体(不支持). http://www.codeply.com/go/lUbs1JgXUd

2 - 使列具有相同的高度(使用flexbox):

由于问题是由高度差异引起的,因此可以使每列的列高度相等.Flexbox是执行此操作的最佳方式,并且在Bootstrap 4中本机支持.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox等高度演示

3 - CSS3列方法(类似砌体的CSS解决方案)..

这不是Bootstrap 3的原生,而是使用CSS多列的另一种方法.这种方法的一个缺点是列顺序是从上到下而不是从左到右.

CSS3列演示

4 - JavaScript/jQuery方法

最后,您可能想要使用像Isotope/Masonry这样的插件:

Bootstrap砌体演示

有关Bootstrap变量高度列的更多信息