没有行的Bootstrap？

Question

我喜欢bootstrap,但我正在努力实现完全超出其预期网格的东西,即将单元格堆叠在一起而没有分组线.像Pinterest这样的东西,如果你愿意的话.

Bootstrap正常网格:

Bootstrap没有行概念:

也许正确的答案是"不要使用bootstrap",但用它构建了许多网站,我很乐意继续使用它并找到解决方法.

如果我确实应该使用另一个响应框架,网格系统更像我需要的,你会推荐什么？

TIA

Answer 1

我已经为一个嵌套的拖放框api做了类似的问题,其目标是在最终渲染时符合引导网格,构建器不是引导网格,而是自制类似引导网格的范例而且我'用CSS3奇妙的flexbox修复它

看一下flexbox的解决方案

我已经推出了一个根行(只有一行用于多行)并为其添加了一个实现的类

display: flex;
flex-wrap: wrap;

例如:

<div class="row flex-row">
    <div class="col-6">Variable height content</div>
    <div class="col-3">...</div>
    <div class="col-12">...</div>
    <div class="col-3">...</div>
    ...
</div>

和css

.flex-row{
    display: flex;
    flex-wrap: wrap;
}

这样可以自动调整同一行上所有盒子的高度到较大的盒子的高度

Answer 2

看起来你必须使用JS来达到目标​​.

您可以使用以下库:

Jquery Wookmark - 重量轻,速度快.用于解决类似问题

同位素 - 灵活和伸手可及的功能之一

Mansonry - 流行的lib,类似于Isotope