twitter-bootstrap Bootstrap 3 流体网格布局问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19572753/
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
Bootstrap 3 fluid grid layout issues?
提问by Peter Hyman
Im using Bootstrap 3 to layout my website with fluid grid, but the boxes in the grid don't line up in a row.
我使用 Bootstrap 3 用流体网格布局我的网站，但网格中的框没有排成一行。
You can see: 
你可以看到：
When a box is taller than another, the grid is not left aligned.
当一个盒子比另一个高时，网格不会左对齐。
How can I fix it with some hack ? Thank for help !
我怎样才能用一些 hack 修复它？感谢帮助！
Note : the height of box is auto wrap contents.
注意：盒子的高度是自动换行的内容。
My html code
我的html代码
<div class="row">
<?php foreach($contens as $content){?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
................ some code .............
</div>
</div>
<?php } ?>
</div>
回答by Zim
I'm not sure exactly what you're trying to accomplish, but the issue is caused because the content of the columns varies in height. There are 3 overall approaches to fix grid alignment / height issues..
我不确定您到底要完成什么，但问题是由于列的内容高度不同而引起的。有 3 种整体方法可以解决网格对齐/高度问题。
1.A CSS only approach (using CSS3 column width) like this..
1.像这样的仅 CSS 方法（使用 CSS3 列宽）..
2.A 'clearfix' approach like this (requires iteration every x columns). This is the approach recommended by Bootstrap known as "responsive resets"..
2.像这样的“clearfix”方法（需要每 x 列迭代一次）。这是Bootstrap 推荐的方法，称为“响应式重置”。
http://bootply.com/89910(there is also a CSS-onlyvariation to this approach)
http://bootply.com/89910（这种方法还有一个仅 CSS 的变体）
3.Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..
3.最后，您可能想使用 Isotope/Masonry 插件。这是一个使用 Isotope + Bootstrap 的工作示例。
Update 2017
2017 年更新
Another option is to make the columns the same height (using flexbox):
另一种选择是使列具有相同的高度（使用 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;
}
Bootstrap 4 uses flexbox so columns in each row are the same height by default (without the extra CSS).
Bootstrap 4 使用 flexbox，因此每行中的列默认情况下具有相同的高度（没有额外的 CSS）。
回答by ahuth
Enforce a height for each <div>column.
为每一<div>列强制一个高度。
I would give your columns a class name:
我会给你的列一个类名：
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
...
</div>
And then do something like this:
然后做这样的事情：
.outer {
height: 200px /* Or whatever the height really is */
}
Your columns are being laid out weird because of the varying heights of the boxes. Enforcing a height of the container element will fix that.
由于盒子的高度不同，您的列的布局很奇怪。强制容器元素的高度将解决这个问题。
The best part is, this doesn't require you to add random <div>'s that don't have anything to do with the content.
最好的部分是，这不需要您添加<div>与内容无关的random 。
EDIT:
编辑：
You could also enforce the height only when you're using the 'sm' breakpoints and above.
您也可以仅在使用 'sm' 断点及以上时强制执行高度。
This would ensure that everything lines up when columns are being used, and that there won't be large gaps in between each one when they're full width (i.e. col-xs-12).
这将确保在使用列时所有内容都对齐，并且当它们全宽（即 col-xs-12）时，每个列之间不会有很大的间隙。
@media (min-width: 768px) {
.outer {
height: 200px /* Or whatever */
}
}
回答by Adrian
I had a similar problem. I fixed with this script pretty quickly and pain free:
我有一个类似的问题。我很快就修复了这个脚本，而且没有痛苦：
<script>
$.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
$('#container').isotope({
itemSelector : '.items',
layoutMode : 'fitRows'
});
});
</script>
in your case, you will need to add a container ID e.g. '#container' and add the class to each item e.g. '.item'
在您的情况下，您需要添加一个容器 ID，例如“#container”并将类添加到每个项目，例如“.item”
回答by fnkrm
Here's a super simple jQuery solution to get all elements still aligned.
这是一个超级简单的 jQuery 解决方案，可以让所有元素仍然对齐。
I solved this issue by getting the column with highest height and setting this height to every other columns. Try the snippet below.
我通过获取具有最高高度的列并将此高度设置为所有其他列来解决此问题。试试下面的片段。
setTimeout(function(){
var maxHeight = 0;
$('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}});
$('.item').each(function() {$(this).height(maxHeight)});
}, 1000);.item {
border: 1px solid black;
}
.big {
height:50px;
background-color:fuchsia;
}
.normal {
height:40px;
background-color:aqua;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4 item big">I am big</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
</div>回答by Samia Ruponti
I think you need to use clearfix. just put the classclearfixon your parent element (in your case, row, I think) and put this in your css:
我认为你需要使用clearfix. 只需将类clearfix放在您的父元素上（在您的情况下，我认为是行）并将其放入您的 css 中：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
回答by EnduroDave
I agree with Skelly in that a masonry plugin is probably the way to go, but for a quick easy fix you can just make a new row every time you want something left aligned - its a quick and dirty hack and can have some issues on smaller viewports.
我同意 Skelly 的观点，因为砌体插件可能是要走的路，但是为了快速轻松地修复，您可以在每次想要左对齐时创建一个新行 - 这是一个快速而肮脏的黑客，并且可能会在较小的情况下出现一些问题视口。
回答by Dieter Casier
My solution: I worked with the visible- classes of bootstrap 3
我的解决方案：我使用了 bootstrap 3 的可见类
<div class="row">
<?php
$indexLg = 1;
$indexSm = 1;
foreach($contens as $content) {?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
</div>
</div>
<?php
if($indexLg%4 == 0) {
$indexLg = 1;
?>
<div class="clearfix visible-lg visible-md"></div>
<?php
}
if($indexSm%2 == 0) {
$indexSm = 1;
?>
<div class="clearfix visible-sm"></div>
<?php
}
?>
<div class="clearfix visible-xs"></div>
<?php
}
} ?>
