Css 无行引导？

我喜欢bootstrap，但我正试图实现一些完全超出其预期网格的东西，即让单元彼此堆叠，而不需要分组线。如果你愿意的话，比如说Pinterest

引导正常网格：

引导无行概念：

也许正确的答案是“不要使用bootstrap”，但在用它构建了许多站点之后，我很想继续使用它，并找到解决这个问题的方法

如果我真的应该使用另一个响应性框架和更像我需要的网格系统，你会推荐什么

---

tia

您可以尝试在引导中反转列和行

<div class="row">
    <div class="col-sm-4">
        <div class="row">Some content here</div>
        <div class="row">Some content here with more text than the first content but it still needs some more</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
    </div>
    <div class="col-sm-4">
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
    </div>
</div>

这里有一些内容
这里的一些内容比第一个内容包含更多的文本，但它仍然需要更多的文本
这里有一些内容
这里有一些内容
这里有一些内容
这里有一些内容
这里有一些内容
这里有一些内容
这里有一些内容

---

这是一个例子

关于

col-（size）-（gridsize）

要了解的关键是它们将从左到右包装，然后从上到下包装。因此，如果您制作一个网格大小小于12的

col

，其他

col

将开始环绕。您还可以根据需要嵌套它们以拆分页面。因此，可以创建如下“无行”布局：

（这不是一个令人惊奇的演示，但它说明了您想要的是可能的）

---

您可以在列中使用行，然后在这些行中使用新列 如果您在填充方面有问题，请 类无填充/无左填充/无右填充

<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12"></div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>
    </div>
</div>

---

看起来您必须使用JS才能达到目标

您可以使用以下LIB：

-重量轻，速度快。用于解决类似问题

-灵活且可触及的功能

---

-流行的lib，类似于同位素

我曾为嵌套拖放框api解决过类似的问题，目标是在最终渲染时与引导网格兼容，构建器不是引导网格，而是一个自制的类似引导网格范例，我已经用CSS3奇妙的flexbox修复了它

看看

我放置了一个根行（只有一个用于多行），并向其中添加了一个实现

display: flex;
flex-wrap: wrap;

例如：

---

这将自动调整同一行中所有框的高度，使之与较大框的高度一致

我想你应该检查一下-我不太清楚，你不能改变css以减少行边距吗？另外，你可以把多个东西放在一行中，它会像你见过的砖石一样流动，我很喜欢它，我想我可以让它很好地使用引导，但是我想知道是否有一种纯粹的引导方式。@serakfalcon，是的，一行中有多个东西，但是为了堆叠它们，我仍然需要使用行。i、 如果我总是分成更小的列，我会很好。不，你根本不需要使用行。我将演示这里的问题是，您的列只能变小。如果我需要堆叠一个更宽的列，我需要一个父行，这会打破垂直堆叠。根据@gpantic的回答，这不会产生我想要的效果。我可能不明白如何使用正确的堆叠制作纯无行布局，或者这似乎不是一个完美的解决方案，因为垂直间隙不一致。可以通过移除

列

项上的填充来固定垂直间隙。我的意思是，在测试了您所说的内容后，我的一些“瓷砖”垂直堆叠，其中一些打破成自然行。当我打开砌体时，这是固定的。谢谢你的投入你是个天才！它必须在引导的核心。

<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>

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