引导堆叠行中的差距

我正在构build一个Bootstrap 3网格,最终将成为一个组合页面。 在下面的例子中,在第一个例子中,你可以看到它在我的bootply中完美地从6堆栈到4堆栈到3 堆栈

然而,在第二个例子中,在同一个bootply中,有一个项目,其中项目的瓷砖更长,并在堆叠时导致网格中的空隙。

什么是最好的引导友好的解决scheme? 任何帮助非常感谢。

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

  1. 给你的投资组合的所有元素一定的高度。
  2. 使用类似砌体的东西来dynamic地将元素“适合”到可用空间中。
  3. 使用响应类和clearfix,如网格部分的标题Responsive列重置下的文档中所述。
  4. 使用jQuerydynamic调整列高度。

如果您的内容是dynamic生成的,因此您不知道哪些元素的内容会更长,并且针对不同的断点设置了不同的布局,则响应式类的方法可能是一个难以适应的问题。 我使用一个小窍门。 在网格中的每个元素后,我添加一个div,我可以应用一个迷你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); }); }); 

Bootstrap“only”方法是使用Bootstrap的.clearfix 。 你必须每隔x列迭代一次,所以在你的情况下,一个clearfix div会放在第六个col-lg-2 。 这将适用于lg屏幕宽度..

http://www.bootply.com/SV0kI3TSN3

但是,由于您使用了多个响应断点,因此您需要在mdxs colums包裹的地方放置一个clearfix 。 这将防止所有屏幕宽度的差距。

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演示(响应层)

“clearfix”(不支持)还有一个CSS-only变体。 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解决scheme)

这不是Bootstrap 3的本地特性,而是另一种使用CSS多列的方法 。 这种方法的一个缺点是列顺序是从上到下而不是从左到右。

CSS3列Demo

4 – JavaScript / jQuery方法

最后,你可能想使用一个插件,如同位素/砌体:

Bootstrap砌体演示


有关Bootstrapvariables高度列的更多信息

我连续两个面板也有同样的问题。

我没有发现任何CSS hack,所以我给了两个面板一个same-height类,我使用这个JS代码。

 boxes = $(".same-height"); maxHeight = Math.max.apply(Math, boxes.map(function () { return $(this).height() }).get()); boxes.height(maxHeight); 

这是一个BootPly链接,使用上面的代码: http : //www.bootply.com/622XyQ0oH5

当然,你必须适应你的CSS规则,我想避免空白。