Bootstrap：像拼图一样重新安排面板

Question

我正在开发一个应用程序并且无法像jquery_ui那样进行自适应调整（例如）。 我想要重新安排不同的块（这些是列，这是主要问题），以便它们之间不会有任何巨大的空白区域。这当然不是bootstrap运行的方式，但无论如何我需要1个特定的布局。

这是我想要实现的目标的图片：

当然，这不能正常工作。您在此处看到的屏幕截图基于col-md-4元素。做数学，这里有些不对劲。第二个问题：左下方的面板应位于右侧。但是，由于这个hack最终有16列而不是12列，所以无论如何它都没有意义。

这是我找到的解决方案：

    .row {
     -moz-column-width: 25em;
     -webkit-column-width: 25em;
     -moz-column-gap: 10px;
     -webkit-column-gap:10px; 

    }

    .row > .col-md-4 {
     display: inline-block;
     width:  100%; 
     float:none;
    }

我准备了一个小小的jsfiddle：https://jsfiddle.net/c19jgvqn/10/

当您折叠面板时，实际上反应会更糟。

任何想法如何以正确的方式做到这一点？我搜索过但找不到任何可行的解决办法。

Answer 1

所以，几个月后我终于找到了答案。用正确的词来形容它：

我一直在寻找一种以砖石风格重新安排自举面板和柱子的方法。这不是一件容易的事情，它违背了bootstrap在网格系统上的基础。

还是：

看看这个链接： Tutsplus Bootstrap panels masonry style