Css Bootstrap 3流体网格布局问题？

我用Bootstrap3用流体网格来布局我的网站，但是网格中的框没有排成一行

你可以看到：

当一个长方体高于另一个长方体时，栅格不会左对齐

我怎样才能用黑客来修复它？谢谢你的帮助

注意：框的高度为自动包裹内容

我的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>

我不确定您到底想实现什么，但问题是由于列的内容高度不同而引起的。共有3种解决栅格对齐/高度问题的总体方法

1.这样一种仅使用CSS的方法（使用CSS3列宽）


2.像这样的“clearfix”方法（需要每x列迭代一次）。这就是方法

（这种方法也有变化）

3。最后，您可能需要使用同位素/砌体插件。下面是一个使用同位素+引导的工作示例



2017年更新

另一个选项是使柱具有相同的高度（使用flexbox）：

由于问题是由高度差异引起的，因此可以使每行的列高度相等。Flexbox是实现这一点的最佳方式，在Bootstrap4中本机支持

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}


Bootstrap4使用flexbox，因此默认情况下，每行中的列高度相同（没有额外的CSS）


我认为您需要使用
clearfix
。只需将class
clearfix
放在父元素上（我认为在您的示例中是row），并将其放在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的观点，一个砌体插件可能是一个不错的选择，但是为了快速简单的修复，你可以在每次需要左对齐的东西时创建一个新行——这是一个快速而肮脏的攻击，在较小的视口中可能会有一些问题。
我的解决方案：
我使用的是Bootstrap3的可视类

<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
    }
} ?>


我也有类似的问题。我很快就修复了这个脚本，而且没有痛苦：

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#container').isotope({
      itemSelector : '.items',
      layoutMode : 'fitRows'
    });
  });
</script>


$.getScript（'//cdn.jsdeliver.net/isotophe/1.5.25/jquery.isotophe.min.js'，function（）{
$（“#容器”）。同位素({
itemSelector:“.items”，
布局模式：“fitRows”
});
});

在您的情况下，您需要添加一个容器ID，例如“容器”，并将类添加到每个项目中，例如“项目”
强制每个
列的高度

我将为您的列指定一个类名：

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
    ...
</div>

由于盒子的高度不同，你们的柱子布置得很奇怪。强制设置容器元素的高度将解决此问题

最好的部分是，这不需要您添加与内容无关的随机

编辑：

您还可以仅在使用“sm”断点及以上断点时强制执行高度

这将确保在使用列时所有内容都对齐，并且当它们是全宽的（即col-xs-12）时，每个列之间不会有很大的间隙

这里有一个超级简单的jQuery解决方案，可以让所有元素保持对齐

我通过获取具有最高高度的列并将此高度设置为每隔一列，解决了这个问题。请尝试下面的代码片段


setTimeout（函数（）{
var maxHeight=0；
$（'.item'）.each（函数（）{if（$（this.height（）>maxHeight）{maxHeight=$（this.height（）}}）；
$（'.item'）.each（function（）{$（this）.height（maxHeight）}）；
}, 1000);
.item{
边框：1px纯黑；
}
.大{
高度：50px；
背景色：紫红色；
}
.正常{
高度：40px；
背景色：浅绿色；
}

我很大
我很正常
我很正常
我很正常
我很正常
我很正常
您确定允许有多个列宽类吗？（老实说，如果这是真的，我不知道）是的，Bootstrap3允许您为不同的屏幕大小设置列宽。这应该是答案。它解释了问题的原因并提供了解决方案。。但是它让html变得非常糟糕。我见过一些关于：nth child的纯css修复，但没有一个是完整的。最好的答案。谢谢❤️ 如果您需要为波斯语（RTL）站点提供此功能，请使用此
justify content:baseline；弯曲方向：行反向不错的css解决方案，bottstrap应该付钱给你
.outer {
    height: 200px /* Or whatever the height really is */
}

@media (min-width: 768px) {
    .outer {
        height: 200px /* Or whatever */
    }
}