How to create a masonry layout using Bootstrap 4?

问题:

This question already has answers here:

Bootstrap 4 masonry layout utilizing flexbox grid (2 answers)

Closed 2 years ago.

I'm trying to achieve this:

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

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?

Thanks

EDIT:This is not the same as other questions you can see, even if this question has been marked as duplicated. On my example, the 'cards' are not sitting in proper columns, but each one has his own width. Please mark the difference between my question and others

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

回答1:

As @Yan said you can use .card-columns to archive a Masonry layout, you can find more information in the Boostrap 4 docs.

There's how the code should look:

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

回答2:

Bootstrap Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns.

Check this working masonry code with cards!

 <div class="card-columns">

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

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

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

   </div>