不同高度的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>

问题在于，当盒子的高度不同时，它会将下面的盒子推到一个新线上并留下一个丑陋的间隙，如下所示：

我已经浏览了自举文档，但我无法弄清楚如何解决这个问题。我已经尝试将clearfix添加到循环中并设置display: inline但是无法将它放在一起而没有间隙。

任何人都知道我做错了什么？

我在这里查看了其他解决方案，他们有3个固定列。当我从数据库输出时，这不会起作用，所以我不知道盒子的高度，所以如果我将它们分成3个固定的列，那么一个可能比其他的更高，看起来很糟糕。 / p>

我看到网站很好地融合在一起，但不确定它是如何完成的。

Answer 1

引导本机类col-md- *最初是浮动的

因此，请尝试在列

上设置float:none

Answer 2

如果您愿意，可以通过编程方式构建行。

例如，在PHP中：

print('Ready to serve...')
while True:
    #Establish the connection
    try:
        connectionSocket, addr = serverSocket.accept()
    except KeyboardInterrupt:
        break
    t = threading.Thread(target=work, args=(connectionSocket,))
    threads.append(t)
    t.start()

print("Exiting")
for t in threads:
    t.join(5)
serverSocket.close() 

输出：

$posts = ["Post 1","Post 2","Post 3","Post 4","Post 5"]; // Your posts
$post_number = 1; // Counter

foreach($posts as $post){

    // Open a new row if the first column
    if($post_number % 3 == 1)
        echo "<div class='row'>\n";

    // Post content goes here
    echo "<div class='col-md-4'> Post Content: ".$post." </div>";

    // Close the row if the last column
    if($post_number % 3 == 0)
        echo "</div>";

   // Move to next post
   $post_number++;

}

// Close the row if there's not already a closing tag
if(count($posts) % 3 != 0)
    echo "</div>";

修改

糟糕！刚刚看到您对原始帖子的回复...如果您希望帖子向上移动以填补空白，我的解决方案将无效。

Answer 3

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

Masonry

  

Masonry是一个JavaScript网格布局库。它通过放置工作   基于可用垂直空间的最佳位置的元素，排序   就像石匠在墙上贴石头一样。你可能已经看过了   在互联网上使用。