使用 Bootstrap 4 获得类似砌体的布局答案

【问题标题】：Get masonry like layout with Bootstrap 4使用 Bootstrap 4 获得类似砌体的布局
【发布时间】：2018-09-17 16:09:34
【问题描述】：

我想创建以下布局（见 img）：

主要内容：

这些块将像砌体布局一样“合并”在一起，下方没有边距
一个块与其他块（或更多此类块）的两倍

我尝试了两种方式：

使用 Bootstrap 的 Cards 选项，但我无法让它工作，因为一列的大小是其他列的两倍，并且还删除了边距。
将两张图片放在 1 列中，但这样做的问题是，如果您使其具有响应性，则顺序会混乱。

有没有人有过这样的工作经验？

【问题讨论】：

在 bootstrap-4 中使用网格组件。见How to Ask 和minimal reproducible example。
但是我的布局看起来像这样：i.imgur.com/EfT7l40.jpg我希望它在最后 2 项上没有边距/空白。
你可以这样做。 第 1 行 4 个元素，你做到了。 第 2 行 2 个元素。右边的只是一个大矩形。左边的必须再细分为 2 行，每行 2 个元素。您可以嵌套网格元素并在单元格中包含行。
我试过了，但是当我让它响应时，顺序会改变吗？
对于响应式，我做了类似的事情（虽然没那么复杂），我必须提供许多标签才能让它工作。前任。我会放置 col-md- 和 col- 标记，因此随着屏幕尺寸的减小，它使用较小的值。但在某一点上，布局将只变成一列，不管你怎么放。你只能在一个小宽度的窗口中放置这么多。

标签： twitter-bootstrap bootstrap-4 masonry

【解决方案1】：

这就是我构建 BootStrap 网格以获得与您类似的布局的方式。

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Grid test</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="grid.css" rel="stylesheet">
    </head>
    <body>
        <div class="container-fluid">
            <h1>Grid test</h1>
        </div>
        <div class="row">
            <div class="col">COL1</div>
            <div class="col">COL2</div>
            <div class="col">COL3</div>
            <div class="col">COL4</div>
        </div>
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col">COLa</div>
                    <div class="col">COLb</div>
                </div>
                <div class="row">
                    <div class="col">COLc</div>
                    <div class="col">COLd</div>
                </div>
            </div>
            <div class="col">COL+</div>
        </div>
    </body>
</html>

CSS

body {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h3 {
  margin-top: 2rem;
}

.row {
  margin-bottom: 1rem;
}
.row .row {
  margin-top: 1rem;
  margin-bottom: 0;
}
[class*="col"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

您现在必须修改 CSS 边距、颜色、对齐方式...

我用的是刚刚下载的bootstrap v4.1
这是基于引导示例http://getbootstrap.com/docs/4.1/examples/grid/
此处发布的 grid.css 基于同一站点。
我在 Chrome 中尝试过，并且能够将窗口的大小从可能的最小宽度调整为最大。

编辑以下是结果的屏幕截图：

全宽：

响应式，就像它开始堆叠 div 一样：

最终你得到这个订单，自上而下：

col1
col2
col3
col4
可乐
colb
colc
冷
col+

【讨论】：

谢谢，但这并不能解决响应版本的订单会发生变化的问题。检查：jellekok.com/new/work.php 并缩小屏幕宽度（如手机/平板电脑）。编辑：我看到你的代码有点不同，让我试试
是的，这在我的响应版本中不起作用，其中 2 个彼此相邻。基本上，您示例中的最后一个 COL 必须位于上述两个 COL 之间（它们位于同一行中......）
它在一定程度上起作用。然后，随着屏幕变小（大约 278），它开始垂直堆叠它们。但在响应式中总是如此，它会以某种方式使其适合。如果要强制执行结构，则必须固定到一定宽度，而不是响应式。
我在答案中添加了屏幕打印。你想要，自上而下：col1，col2，col3，col4，cola，colb，col+，colc，cold？右边的大部分到左边最后两个之间？
问题是，我不希望“Col +”的高度是其他高度的两倍。在响应式视图中，我只希望所有内容都具有相同的大小。