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 - 當高度不同時堆疊縮略圖

回答

相關問題