css - 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. 您正在寻找 Masonry Layout - 查看此以获取更多信息以及如何做到这一点。 http://designshack.net/articles/css/masonry/