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

您正在使用“Col”方法错误。查看Bootstrap以获取有关连续使用列的更多信息（每行应为maxium 12）。
您正在寻找砌体布局 - 请查看此内容以获取更多信息以及如何执行此操作。 http://designshack.net/articles/css/masonry/

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

1 个答案: