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

Question

我正在使用 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

有什么建议吗？

谢谢！

Answer 1

1. 您使用的“Col”方法错误。查看 Bootstrap 以了解有关在一行中使用列的更多信息（每行最多应为 12 个）。

2. 您正在寻找砌体布局 - 查看此以了解更多信息以及如何做到这一点。 http://designshack.net/articles/css/masonry/