我使用 Bootstrap 3 用流体网格布局我的网站，但网格中的框没有排成一行。
你可以看到：
当一个盒子比另一个盒子高时，网格不会左对齐。
我怎样才能用一些技巧来修复它？感谢您的帮助！
注意：盒子的高度是自动换行内容。
我的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>
我不确定您到底要完成什么，但问题是由于列的内容在 height 变化而引起的。有 3 种整体方法可以解决网格对齐/高度问题。
1.像这样的纯 CSS 方法（使用 CSS3 列宽）..
2.像这样的“clearfix”方法（需要每 x 列迭代一次）。这是Bootstrap 推荐的称为“响应式重置”的方法。
http://bootply.com/89910（这种方法还有一个纯 CSS变体）
3.最后你可能想使用同位素/砌体插件。这是一个使用 Isotope + Bootstrap 的工作示例。
2017 年更新
另一种选择是使列的高度相同（使用 flexbox）：
由于问题是由高度差异引起的，您可以使每行的列高度相等。Flexbox 是做到这一点的最佳方式，并且在 Bootstrap 4 中原生支持。
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Bootstrap 4 使用 flexbox，因此默认情况下每行中的列高度相同（没有额外的 CSS）。
<div>为每列强制设置一个高度。
我会给你的列一个类名：
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
...
</div>
然后做这样的事情：
.outer {
height: 200px /* Or whatever the height really is */
}
由于盒子的高度不同，您的列的布局很奇怪。强制容器元素的高度将解决这个问题。
最好的部分是，这不需要您添加<div>与内容没有任何关系的 random 。
编辑：
您也可以仅在使用“sm”断点及以上时强制执行高度。
这将确保在使用列时所有内容都对齐，并且当它们全宽时（即 col-xs-12），每个列之间不会有大的间隙。
@media (min-width: 768px) {
.outer {
height: 200px /* Or whatever */
}
}
我有一个类似的问题。我很快就修复了这个脚本并且没有痛苦：
<script>
$.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
$('#container').isotope({
itemSelector : '.items',
layoutMode : 'fitRows'
});
});
</script>
在您的情况下，您将需要添加一个容器 ID，例如“#container”并将类添加到每个项目，例如“.item”
这是一个超级简单的 jQuery 解决方案，可以让所有元素保持对齐。
我通过获取具有最高高度的列并将此高度设置为所有其他列来解决了这个问题。试试下面的片段。
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>我的解决方案：我使用 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
}
} ?>
我认为你需要使用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 */
我同意 Skelly 的观点，因为砌体插件可能是要走的路，但为了快速简单的修复，每次你想要对齐的东西时，你都可以创建一个新行 - 它是一个快速而肮脏的黑客，并且可能会在较小的问题上出现一些问题视口。