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

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

有什么建议？

谢谢！

来源

2014-09-28 Chris

的可能的复制：是否有可能创建一个引导Pinterest的状布局只？（http://stackoverflow.com/questions/12570559/is-it-possible-to-create -a-pinterest-like-layout-with-bootstrap-only） – user13286 2014-09-28 22:57:38

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

来源

2014-09-28 22:57:45 derdida

谢谢。砌体CSS似乎工作正常。 – Chris 2014-09-29 00:30:27

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

回答

相关问题