如何在引导程序中按列而不是行对齐

Question

I've been having a lot of trouble finding out how to align my site this way using a grid system and could not find any questions regarding this when I searched.

I essentially want my site to layout like this , but when using Bootstrap's grid system like:

<div class="row">
    <div class="col s3">
        ....
    </div>
    <div class="col s9">
        ....
    </div>
</div>

If any content in the second column extends past the first it shifts the whole page down. Any ideas? I don't want the second column heights to be restricted by the bounds set by the first column.

Answer 1

Bootstrap does not offer this functionality. You could achieve this effect using Masonry.js . Take a look at this jQuery plugin. It should do the trick.

http://masonry.desandro.com/

It is very well documented and easy to implement. Good luck!