如何使用 Bootstrap 4 创建砌体布局？ [复制]答案

【问题标题】：How to create a masonry layout using Bootstrap 4? [duplicate]如何使用 Bootstrap 4 创建砌体布局？ [复制]
【发布时间】：2018-10-31 20:56:49
【问题描述】：

我正在努力实现这一目标：

使用 Bootstrap 4、Js、Css 和明显的 HTML。我没有成功在 SO 上找到类似的东西，

但我在 Bootstrap 4 文档中找到了这个，但我不确定这是否正确：Bootstrap 4 Cards

有人能告诉我创建此布局的最佳方法吗？

谢谢

编辑：这与您可以看到的其他问题不同，即使此问题已被标记为重复。在我的例子中，“卡片”没有放在适当的列中，但每个都有自己的宽度。请标出我的问题与其他问题的区别

EDIT2：我成功了。 https://youtu.be/CvmeGvKbPlM

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

通过将引导卡包装在 .card-columns 中，可以仅使用 CSS 将引导卡组织成类似 Masonry 的列。

用卡片检查这个工作砌体代码！

 <div class="card-columns">

            <div class="card">
               Card 1
            </div>

            <div class="card">
              Card 2
            </div>

            <div class="card">
               Card 3
            </div>

   </div>

【讨论】：

我讨厌成为“那个人”，但这应该是评论而不是答案。你真的应该尽量远离只有链接的答案，因为link-rot 是 2018 年的真实存在
注意！感谢您的反馈

【解决方案2】：

正如@Yan 所说，您可以使用.card-columns 归档砌体布局，您可以在Boostrap 4 docs 中找到更多信息。

代码应该是这样的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">
<div class="card-columns">
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/450x350" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
    <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/350x150" alt="Card image cap">
  </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

【讨论】：

感谢您的回答。那么卡片是正确的解决方案吗？可以肯定的是，因为在您的示例中，所有列都已调整大小，无论您指定什么宽度。在我的照片上，每个元素都比另一个大/小。例如，第一行图片，它是 col-5（巴黎）、col-4（马赛）和 col-3（里昂）。我没有看到您的示例中复制了此布局。你能启发我吗？
@yofisim 如果您只想使用 Boostrap 4，是的，这是获得砌体布局的最接近的方法。
我成功做到了，没有使用卡片，但我现在无法发布答案。我在行上没有使用排水沟，并按 md-3、md-4、md-5、md-6 等大小定义列。然后我正确定义了我想要的排水沟。它就像一个魅力，但感谢您的帮助！这是解决方案的视频youtu.be/CvmeGvKbPlM