引导堆叠行中的差距
我正在构build一个Bootstrap 3网格，最终将成为一个组合页面。 在下面的例子中，在第一个例子中，你可以看到它在我的bootply中完美地从6堆栈到4堆栈到3 堆栈
然而，在第二个例子中，在同一个bootply中，有一个项目，其中项目的瓷砖更长，并在堆叠时导致网格中的空隙。
什么是最好的引导友好的解决scheme？ 任何帮助非常感谢。
有几种方法来处理这个问题：
- 给你的投资组合的所有元素一定的高度。
- 使用类似砌体的东西来dynamic地将元素“适合”到可用空间中。
- 使用响应类和clearfix，如网格部分的标题Responsive列重置下的文档中所述。
- 使用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
但是，由于您使用了多个响应断点，因此您需要在md和xs 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规则，我想避免空白。
