Question

我使用Bootstrap 3用流体网格布局我的网站，但是网格中的框没有排成一排。

您可以看到： enter image description here

当一个盒子高于另一个盒子时，网格不会左对齐。

如何通过一些黑客来修复它？谢谢你的帮助！

注意：框的高度是自动换行内容。

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

Answer 1

我不确定您要完成的是什么，但问题是由于列的内容高度不同而导致的。有3种方法可以解决网格对齐/高度问题。

1。这样的CSS方法（使用CSS3列宽）。

http://bootply.com/85737

2。 A＆＃39; clearfix＆＃39;像这样的方法（每x列需要迭代）。这是方法recommended by Bootstrap known as "responsive resets" ..

http://bootply.com/89910（此方法也有a CSS-only个变体）

3。最后，您可能想要使用Isotope / Masonry插件。这是一个使用Isotope + Bootstrap的工作示例..

http://bootply.com/61482

2017年更新

另一种选择是使列具有相同的高度（使用flexbox）：

由于问题是由高度中的差异引起的，因此您可以在每行中使列等于高度。 Flexbox是执行此操作的最佳方式，并且在Bootstrap 4中本机支持。

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

Flexbox equal height Demo

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

More on Bootstrap Variable Height Columns

Answer 2

我有类似的问题。我很快就用这个脚本修复了这个脚本：

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

在您的情况下，您需要添加容器ID，例如'#container'并将类添加到每个项目，例如'.item'

Answer 3

为每个<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>。

编辑：

只有当您使用'sm'断点及以上时，您才可以强制执行高度。

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

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

Answer 4

这是一个超级简单的jQuery解决方案，可以让所有元素保持一致。

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

＆＃13;

setTimeout(function(){
  var maxHeight = 0;
  $('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}});
  $('.item').each(function() {$(this).height(maxHeight)});
}, 1000);

＆＃13;

.item {
  border: 1px solid black;
}
.big {
  height:50px;
  background-color:fuchsia;
}
.normal {
  height:40px;
  background-color:aqua;
}

＆＃13;

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

＆＃13;

Answer 5

我认为您需要使用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 */

Answer 6

我同意Skelly的说法，一个砌体插件可能是要走的路，但是为了快速轻松修复，你可以在每次想要一些左对齐时创建一个新行 - 它是一个快速而肮脏的黑客，可以有一些关于较小视口的问题。

Answer 7

我的解决方案：我使用了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
    }
} ?>

Bootstrap 3流体网格布局问题？

7 个答案: