How to create the masonry effects with just bootstrap 3 grid system and css

问题

My issue is that i want to display data in a block format using the bootstrap 3 grid system however i dont want the annoying whitespace gaps that happen from the height being constrained to the above row. For example, If i do:

<div class=\"row\">
    <div class=\"col-lg-4\">post</div>
    <div class=\"col-lg-4\">longer post that is going to take more height than the others</div>
    <div class=\"col-lg-4\">post</div>
</div>
<div class=\"row\">
    <div class=\"col-lg-4\">post</div>
    <div class=\"col-lg-4\">post</div>
    <div class=\"col-lg-4\">post</div>
</div>

then i will be left with whitespace between the two rows, what i am trying to achieve is a masonry effect (where a post fill sit near the post above it) with only using CSS, Specifically the bootstrap 3 grid system. I.E:

$\"enter$

I know this can be done with plugins but i want to see if theres a more pure (even if it has to be hacky) solution. Any ideas?

回答1:

We did this on a site, and what we did was put the grid in vertical rows.

Example:

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>

回答2:

In Bootstap .row element is used for clearing floats of the div-blocks / col it contains (in your ex. col-lg-4);

So it's basically impossible to have elements in different rows stand next to each other, you necessarily need to change the markup;

On the other hand using bootstrap responsive column system could be helpful for making a CSS-Masonry effect:
you can try placing all "col-items" that you want to make the masonry effect on inside one row, displaying as inline-block(plus maybe some other little adjustments ..) should do the trick (this is the way to go for if you're stuck only with CSS..);

In conclusion remember that Masonry was born and remains a JavaScript grid layout library, so even if you can make it work with CSS I suggest you to use JS .

a thousand thanks to Desandro for this awesome idea;

回答3:

In Bootstrap 4 you can use .card-columns, see here: https://v4-alpha.getbootstrap.com/components/card/

Though I would recommend using isotope as JS offers more control and better compatibility than CSS.

回答4:

i did a simple masonry grid that receive images from DB , by just css like this :

    <div class="container">
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
    <div class="image-gallerie">                                                        
    <img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />                                              

    </div> 
    </a>  
    </div>
    </div>

    .container {
    -moz-column-width: 35em;
    -webkit-column-width: 35em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    }

    .image-gallerie {
     width:  100%; 
     }
    .image-gallerie img{
     width: 100%;
     height: 100%;
     margin-top: 15px;
      margin-bottom: 10px;
    }

来源：https://stackoverflow.com/questions/27550094/how-to-create-the-masonry-effects-with-just-bootstrap-3-grid-system-and-css

标签

css

twitter-bootstrap

masonry