twitter-bootstrap Bootstrap 堆叠行中的间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24571062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gap in Bootstrap stacked rows
提问by Lilster
I am building a Bootstrap 3 grid that will become a portfolio page eventually. In the following bootply, in the first example, you can see it works perfectly stacking from 6 to 4 to 3 in my bootply
我正在构建一个 Bootstrap 3 网格，它最终将成为一个投资组合页面。在下面的 bootply 中，在第一个示例中，您可以看到它在我的bootply 中从 6 到 4 到 3 完美堆叠
However in the second example, on the same bootply, there is an item where the tile for the item is longer and it causes a gap in the grid when it stacks.
但是，在第二个示例中，在同一个 bootply 上，有一个项目的 tile 较长，并且在堆叠时会导致网格中出现间隙。
What is the best bootstrap friendly ,solution to this? Any help much appreciated.
什么是最好的引导程序友好解决方案？非常感谢任何帮助。
回答by jme11
There are a couple of ways to handle this:
有几种方法可以处理这个问题：
- Give all of the elements in your portfolio a set height.
- Use something like masonry to dynamically "fit" the elements into the available space.
- Use the responsive classes and clearfix as described in the doc under the heading Responsive column resets, in the Gridsecion.
- Use jQuery to adjust the column heights dynamically.
- 为您的投资组合中的所有元素设置一个高度。
- 使用诸如砌体之类的东西来动态地将元素“适合”到可用空间中。
- 使用响应式类和 clearfix，如Grid 部分中标题Responsive columnresets 下的文档中所述。
- 使用 jQuery 动态调整列高。
If your content is dynamically generated so that you don't know which elements will have longer content, and you have different layouts set for different breakpoints, the responsive classes approach can be a bear to adapt. I use a little trick. After each element in the grid, I add a div that I can apply a mini clearfix to using media queries. It's extra markup, but it solves the problem nicely and allows me to have readable and maintainable markup while avoiding the use of javascript to adjust the layout. Here's an example using your markup:
如果您的内容是动态生成的，因此您不知道哪些元素会有更长的内容，并且您为不同的断点设置了不同的布局，那么响应式类方法可能需要适应。我用了一个小技巧。在网格中的每个元素之后，我添加了一个 div，我可以对使用媒体查询应用迷你清除修复。这是额外的标记，但它很好地解决了问题，并允许我拥有可读和可维护的标记，同时避免使用 javascript 来调整布局。这是使用您的标记的示例：
Updated Bootply
更新 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:
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;
}
}
If you prefer the jQuery route (again, this assumes that you've added a class "portfolio" to the row that contains your portfolio elements for easier targeting):
如果您更喜欢 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);
});
});
回答by Zim
A Bootstrap "only" approach is to use Bootstrap's .clearfix. You have to iterate this every x number of columns, so in your case a clearfixdiv would be placed after the 6th col-lg-2. This will work for lgscreen widths..
Bootstrap 的“唯一”方法是使用 Bootstrap 的.clearfix. 您必须每 x 列迭代一次，因此在您的情况下，clearfix将在 6th 之后放置一个div col-lg-2。这将适用于lg屏幕宽度..
http://www.bootply.com/SV0kI3TSN3
http://www.bootply.com/SV0kI3TSN3
However since you're using multiple responsive breakpoints, you'd need to place a clearfixwhere the mdand xscolums wrap too. This will prevent the gap at all screen widths.
但是，由于您使用了多个响应断点，因此您还需要clearfix在md和 列xs环绕的位置放置一个。这将防止所有屏幕宽度上的间隙。
http://www.bootply.com/3TsF0arPRS
http://www.bootply.com/3TsF0arPRS
Update 2017
2017 年更新
1 - As explained above, the 'clearfix' approach(recommended by Bootstrap) like this (requires iteration every x columns). This will force a wrap every 3 columns
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 Demo (responsive tiers)
There is also a CSS-only variation of the 'clearfix' (unsupported). http://www.codeply.com/go/lUbs1JgXUd
还有一个“clearfix”（不受支持）的仅 CSS 变体。 http://www.codeply.com/go/lUbs1JgXUd
2 - Make the columns the same height (using flexbox):
2 - 使列具有相同的高度（使用 flexbox）：
Since the issue is caused by the differencein height, you can make columns equalheight across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4.
由于问题是由高度差异引起的，您可以使每行的列高度相等。Flexbox 是做到这一点的最佳方式，并且在 Bootstrap 4 中得到了原生支持。
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
3 - CSS3 columns approach (Masonry-like CSS solution)..
3 - CSS3 列方法（类似砌体的 CSS 解决方案）..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right.
这不是 Bootstrap 3 原生的，而是另一种使用CSS multi-columns 的方法。这种方法的一个缺点是列顺序是从上到下而不是从左到右。
4 - JavaScript/jQuery approach
4 - JavaScript/jQuery 方法
Finally, you may want to use a plugin such as Isotope/Masonry:
最后，您可能想要使用诸如 Isotope/Masonry 之类的插件：
回答by Nicolas Henrard
I had the same problem with two panels side-by-side in a row.
我在连续两个面板并排时遇到了同样的问题。
I did not find any CSS hack for this, so I gave the two panels a same-heightclass and I use this JS code.
我没有找到任何 CSS hack，所以我给了两个面板一个same-height类，我使用了这个 JS 代码。
boxes = $(".same-height");
maxHeight = Math.max.apply(Math, boxes.map(function () {
return $(this).height()
}).get());
boxes.height(maxHeight);
Here is a BootPly link that use the code above: http://www.bootply.com/622XyQ0oH5
这是使用上述代码的 BootPly 链接：http: //www.bootply.com/622XyQ0oH5
Of course, you have to adapt your CSS rules I you want to avoid blank spaces.
当然，你必须调整你的 CSS 规则，你想避免空格。
