Bootstrap 3 流体网格布局问题？答案

【问题标题】：Bootstrap 3 fluid grid layout issues?Bootstrap 3 流体网格布局问题？
【发布时间】：2013-11-03 13:30:48
【问题描述】：

我正在使用 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>

【问题讨论】：

你确定允许有多个列宽类吗？（老实说，我不知道这是不是真的）
是的，Bootstrap 3 允许您为不同的屏幕尺寸设置列宽。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

1. 像这样的纯 CSS 方法（使用 CSS3 列宽）..

http://bootply.com/85737

2. 像这样的“clearfix”方法（需要每 x 列迭代一次）。这是recommended by Bootstrap known as "responsive resets"..的方法。

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

3. 最后，您可能想要使用同位素/砌体插件。这是一个使用 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

【讨论】：

Bootstrap's official docs suggest the clearfix option。但它使 html 真的很讨厌。我已经看到了一些使用 :nth-child 的纯 CSS 修复，但没有一个是完整的。
最佳答案。非常感谢❤️如果您需要此用于波斯 (RTL) 网站，请使用此justify-content: baseline; flex-direction: row-reverse;
不错的 css 解决方案，bottstrap 应该付钱给你

【解决方案2】：

为每个 <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 */
    }
}

【讨论】：

这应该是答案。它解释了问题的原因并提供了解决方案。

【解决方案3】：

我遇到了类似的问题。我很快就修复了这个脚本并且没有痛苦：

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

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

【讨论】：

【解决方案4】：

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

我通过获取具有最高高度的列并将此高度设置为所有其他列来解决此问题。试试下面的 sn-p。

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>

【讨论】：

【解决方案5】：

我认为您需要使用clearfix。只需将 classclearfix 放在您的父元素上（在您的情况下，我认为是行）并将其放入您的 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 */

【讨论】：

【解决方案6】：

我同意 Skelly 的观点，因为砌体插件可能是要走的路，但为了快速简单的修复，您可以在每次想要对齐时创建一个新行 - 这是一个快速而肮脏的 hack 并且可以有一些较小视口上的问题。

【讨论】：

【解决方案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
    }
} ?>

【讨论】：