css - Bootstrap-高度不同时堆叠缩略图

我正在使用Bootstrap框架，并以缩略图格式显示某个类别的帖子。

缩略图的高度不同。我想做的是保持高度不同，但缩略图彼此叠放在一起。

当我有3个以上的职位时，就会留下空白。基本上，我希望以与Pinterest相同的方式堆叠它们。

这是我的缩略图代码如下所示：

<div class="container-fluid">
        <?php
            query_posts('cat=8');
                while(have_posts()) : the_post(); ?>


                        <div class="col-sm-6 col-md-4">
                            <div class="thumbnail">
                                <?php
                                    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                                        the_post_thumbnail( 'bones-thumb-300' );
                                    }
                                ?>
                                <div class="caption">
                                    <h2><?php the_title(); ?></h2>
                                    <p class = "text-muted">Posted by <?php the_author(); ?> on <?php the_time('F jS, Y'); ?></p>
                                    <p><?php the_excerpt(); ?></p>
                                    <p><a href="<?php the_permalink(); ?>" class="btn btn-primary" role="button">Read More</a></p>
                                </div>
                            </div>
                        </div>


        <?php endwhile; wp_reset_query(); ?>

这是现在的样子：
my webpage

有什么建议么？

谢谢！

最佳答案

您使用的“ Col”方法错误。请查看Bootstrap以获取有关在一行中使用列的更多信息（每行最多12个）。
您正在寻找砌体布局-请查看此以获得更多信息以及如何做到这一点。
http://designshack.net/articles/css/masonry/