2017年更新

Question

我正在构建一个最终将成为投资组合页面的Bootstrap 3网格。在下面的bootply中，在第一个示例中，您可以看到它在我的 bootply

中完美地叠加了6到4到3个

然而，在第二个示例中，在同一个bootply中，有一个项目，其中项目的图块较长，并且在堆叠时会在网格中产生间隙。

什么是最好的bootstrap友好解决方案？任何帮助非常感谢。

Answer 1

有几种方法可以解决这个问题：

为您的投资组合中的所有元素设置一个高度。
使用像砌体这样的东西来动态地“适应”＃34;元素进入可用空间。
使用 Grid 部分中响应列重置标题下的文档中所述的响应式类和clearfix。
使用jQuery动态调整列高。

如果您的内容是动态生成的，因此您不知道哪些元素的内容较长，并且您为不同的断点设置了不同的布局，则响应式类方法可以适应。我用了一个小技巧。在网格中的每个元素之后，我添加了一个div，我可以应用mini clearfix来使用媒体查询。它是额外的标记，但它可以很好地解决问题并允许我具有可读和可维护的标记，同时避免使用javascript来调整布局。以下是使用标记的示例：

Updated Bootply

<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-body">
                <a href="#">
                    <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
                </a>
            </div>
            <div class="panel-footer">
                This is text
            </div>  
        </div> 
    </div>
    <div class="clear"></div> <!--Here's the added div after every element-->
  ....
</div> <!--/.portfolio.row-->

<强> CSS：

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

如果你更喜欢jQuery路线（再次假设你已经在包含你的投资组合元素的行中添加了一个类＆＃34;投资组合＆＃34;以便更容易定位）：

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

Answer 2

Bootstrap“only”方法是使用Bootstrap的.clearfix。你必须每隔x列迭代一次，所以在你的情况下，clearfix div将放在第6 col-lg-2之后。这适用于lg屏幕宽度..

http://www.bootply.com/SV0kI3TSN3

但是，由于您使用的是多个响应断点，因此您需要在clearfix和md列的位置放置xs。这样可以防止所有屏幕宽度出现间隙。

http://www.bootply.com/3TsF0arPRS

2017年更新

1 - 如上所述，'clearfix'方法（recommended by Bootstrap）就像这样（需要每x列迭代一次）。这将强制每3列包装

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (single tier)

Clearfix Demo (responsive tiers)

还有'clearfix'的CSS-only变体（不支持）。 http://www.codeply.com/go/lUbs1JgXUd

2 - 使列具有相同的高度（使用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

3 - CSS3列方法（类似砌体的CSS解决方案）..

这不是Bootstrap 3的原生，而是另一种使用CSS multi-columns的方法。这种方法的一个缺点是列顺序是从上到下而不是从左到右。

CSS3 columns Demo

4 - JavaScript / jQuery方法

最后，您可能想要使用插件，例如Isotope / Masonry：

Bootstrap Masonry Demo

More on Bootstrap Variable Height Columns

Answer 3

我连续两个面板并排出现了同样的问题。

我没有找到任何CSS hack，所以我给了两个面板一个same-height类，我使用这个JS代码。

boxes = $(".same-height");
maxHeight = Math.max.apply(Math, boxes.map(function () {
    return $(this).height()
}).get());
boxes.height(maxHeight);

以下是使用上述代码的BootPly链接：http://www.bootply.com/622XyQ0oH5

当然，你必须调整你想要的CSS规则以避免空格。

Bootstrap的差距堆积了行

3 个答案:

Updated Bootply

2017年更新