Question

你好我使用bootstrap砌体网格，它在wordpress显示帖子的循环中。目前帖子从上到下显示。我想从左到右显示它们。我尝试了一些东西，但网格受到干扰。任何有css的解决方案都会很好。

<div class="item blogGridBox">
        <div class="well well-sm">
            <h3 class="special-blog-title truncate"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>
            <span class="special-blog-author">By: <?php the_author_meta( 'display_name' ); ?></span><span class="special-blog-date">| <?php echo get_the_date(); ?></span>
            <span class="special-blog-comments disqus-comment-count" data-disqus-url="<?php the_permalink() ?>#disqus_thread"></span>
            <a href="<?php the_permalink() ?>">
            <?php if ( has_post_thumbnail() ) { 
                the_post_thumbnail('full', array( 'class' => 'center-block img-responsive' ));  
            }
            else
            {
            ?>
            <img src="<?php echo get_template_directory_uri(); ?>/images/xoomthumb.png" alt="Xoomworks" class="img-responsive center-block" /> <?php
            }
            ?>
            </a>
            <?php the_excerpt() ?>
            <a href="<?php the_permalink() ?>" class="special-blog-more">Read More</a>
         </div>
    </div>

这是CSS

.container.blogGap .item{
    display: inline-block;
    padding: 0.25rem;
    width: 100%;
}
.special-blog{
    max-height: 26px;    
}

.container.blogGap .row {
     -moz-column-width: 25em;
     -webkit-column-width: 25em;
     -moz-column-gap: 1em;
     -webkit-column-gap:1em;
}
.container.blogGap .well {
    border: medium none;
    box-shadow: none;
    display: block;
    margin-bottom: 40px;
    background-color:#FFF;
    position: relative;
    border-radius: 8px;
    padding-bottom: 17px;
    padding:12px;
}

.container .special-blog-title, .container .special-blog-title a{
    color: #5c5c5c !important;
    font-size: 20px;
    margin-bottom: 25px;
    line-height: 23px;
    margin-top: 6px;
}
.container .special-blog-author{color: #136eb7; padding-right: 5px; font-size: 13px; margin-bottom: 10px; display: inline-table;}
.container .special-blog-date{color: #8b8b8b; padding-right: 5px; font-size: 13px; margin-bottom: 10px; display: inline-table;}
.container .special-blog-comments{color: #136eb7; float: right; font-size: 13px; margin-bottom: 10px; display: inline-table;}
.container .special-blog-content{ font-size: 15px; line-height: 20px;margin: 19px 0 10px; display: inline-table;}
.container .special-blog-more{color: #136eb7;font-size: 14px; text-decoration: none; display: inline-table;}
.container .special-blog-more:hover{color: #136eb7;text-decoration: none; display: inline-table;}
.container .special-blog-more:focus{color: #136eb7;text-decoration: none; display: inline-table;}
.container .special-blog-more:selected{color: #136eb7;text-decoration: none; display: inline-table;}
.item.blogGridBox p{     color: #777;font-size: 16px;line-height: 1.55;margin: 19px 0 10px; display: inline-table;}

Answer 1

我认为以最容易理解的方式回答您的问题是访问以下网站isotope masonry我将其用于我的所有mason要求with bootstrap。希望这可以帮助。干杯

Bootstrap砌体网格（从左到右）

1 个答案: