html - 不同高度的 Bootstrap 列不适合垂直

Question

我正在从数据库中输出方框网格并使用 Bootstrap 进行格式化。每个框都是 col-4，所以每行有 3 个。

我的代码看起来像这样:

<div class="row">
  <div class="col-md-4">contentbox code here</div>
  <div class="col-md-4">contentbox code here</div>  
  <div class="col-md-4">contentbox code here</div>  
  <div class="col-md-4">contentbox code here</div>
  // etc....
</div>

问题是，当盒子的高度不同时，它会将下面的盒子推到新的一行并留下丑陋的间隙，如下所示:

我已经阅读了 Bootstrap 文档，但我不知道如何解决这个问题。我已经尝试将 clearfix 添加到循环中并设置 display: inline 但无法将它无间隙地组合在一起。

有人知道我做错了什么吗？

我查看了此处的其他解决方案，它们有 3 个固定列。这行不通，因为我正在从数据库输出，所以我不知道盒子的高度，所以如果我以某种方式将它们分成 3 个固定列，那么一个可能比其他的高很多并且看起来很糟糕。

我见过一些网站可以很好地组合在一起，但不确定是如何完成的。

Answer 1

根据您的问题，现有的解决方案可以满足您的需求，但它确实需要一些额外的 JavaScript 编码。

Masonry

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.