如何像砌体布局一样对齐 Bootstrap 网格？答案

【问题标题】：How to align Bootstrap grids like a masonry layout?如何像砌体布局一样对齐 Bootstrap 网格？
【发布时间】：2018-10-04 23:39:53
【问题描述】：

我现在的网格设置如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class='col-md-12 col-sm-12 col-xs-12'>
    <div class='col-md-9 col-sm-9 col-xs-12 text-center'  style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 1
    </div>

    <div class='col-md-3 col-sm-3 col-xs-12'style="height:320px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 2
    </div>

    <div class='col-md-9 col-sm-9 col-xs-12 text-center' style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 3
    </div>
</div>

我当前的输出是

我想去掉 div 1 和 div 3 之间的空白。我不想合并 div 1 和 div3，因为在移动模式下，div 2 低于 div 3。

我的预期结果是

如何在引导程序中实现这一点？

【问题讨论】：

投反对票的问题有什么问题？
我没有投反对票，但我猜谁投反对票是因为你的代码与你当前的输出不匹配。你能在演示中添加你拥有的 CSS 吗？
这只是网格放置的说明。我不是在寻找任何设计
是的，但是您提供的代码并未按照屏幕截图显示的方式布置网格。因此，我们给出的任何潜在答案都可能不起作用，因为它们可能与您所做应用的任何代码冲突，以使它们看起来像这样。因此，我们需要查看所谓的minimal reproducible example 才能提供帮助。如果缺少这样的问题，许多用户会投反对票。
同意。出于@TylerH 指定的原因投反对票。修正你的帖子，我会删除我的反对票。

标签： html css layout twitter-bootstrap-3

【解决方案1】：

它非常简单：下面是使用 bootstrap 4 的演示。网格必须包裹在 container 内，col 始终包裹在 row 内。

div {
  background: skyblue;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <div class="row">
        <div class="col-12">
          DIV 1
        </div>
        <div class="col-12 d-block d-md-none">
          DIV2 on small
        </div>
        <div class="col-12">
          DIV 3
        </div>
      </div>
    </div>
    <div class="col-md-4 d-none d-md-block">
      DIV 2
    </div>
  </div>
</div>

Here is a JSFIDDLE link to play around with

【讨论】：

好吧，如果我在移动设备上查看，div 2 将低于 div3。我不希望这种情况发生。这是这里的主要问题。
在这种情况下，您必须在 1 和 3 之间再添加一次潜水，使其在小型设备上可见并在中型和大型设备上隐藏，反之亦然，使用 div 2。使用显示实用程序
谢谢曼尼什。让我现在试试这个
这可能是因为我使用的是 bootstrap 3 并且显示实用程序适用于 bootstrap4
好的，所以您可以为此编写媒体查询...或者迁移到引导程序 4...或者您可以只从引导程序 4 中获取实用程序并使用它们..您是什么构建系统using.. 你在使用 css 还是 SCSS？

【解决方案2】：

这个怎么样

<div class="row">
    <div class="col-sm-9">
        <div>
            div 1
        </div>
        <div class="visible-xs">
            div 2
        </div>
        <div>
            div 3
        </div>
    </div>
    <div class="col-sm-3 hidden-xs">
        div 2
    </div>
</div>

这是一个 JSfiddle https://jsfiddle.net/rutmws7a/

【讨论】：

如果你要对我投反对票，请解释原因，我写的内容适用于问题的要求。不过，我会很感激建设性的批评。