如何使用Bootstrap 4创建砌体布局? [英] How to create a masonry layout using Bootstrap 4?

问题描述

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

I'm trying to achieve this:

使用Bootstrap 4，Js，Css和HTML. 我没能在SO上找到类似的东西，

Using Bootstrap 4, Js,Css and obviously HTML. I did not succeed to find something similar on SO,

但是我在Bootstrap 4文档中找到了这个，但是我不确定这是否正确:引导4张卡

but I found this on the Bootstrap 4 documentation, but I'm not sure if this is the right thing: Bootstrap 4 Cards

有人可以启发我介绍创建此布局的最佳方法吗?

Can someone enlight me on the best way to create this layout?

谢谢

这与您看到的其他问题并不相同，即使该问题已被标记为重复.在我的示例中，卡片"没有放在适当的列中，但是每张卡片都有自己的宽度.请标记我的问题和其他问题之间的区别

我成功了. https://youtu.be/CvmeGvKbPlM

I made it work. https://youtu.be/CvmeGvKbPlM

推荐答案

正如@Yan所说的，您可以使用.card-columns来存档砌体布局，您可以在

As @Yan said you can use .card-columns to archive a Masonry layout, you can find more information in the 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>

这篇关于如何使用Bootstrap 4创建砌体布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！