html - Bootstrap : re-arrange panels like a puzzle

Question

我正在开发一个应用程序，但无法像 jquery_ui 那样让 Bootstrap 适应(例如)。我希望重新排列不同的 block (它们是列，这是主要问题)，以便它们之间不会有任何巨大的空白。这当然不是 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/

当您折叠面板时，它的 react 实际上更糟。

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

Answer 1

所以，几个月后我终于找到了答案。以及描述它的正确词语:

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

仍然:

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