Question

我希望博客帖子以三行的形式填充主页。前三个blost帖子显示正常，但之后博客文章已关闭。我想让每个帖子垂直和水平排列。您可以看到示例here。

我是否需要为每三个帖子添加一行？我不确定如何编写代码？

<div class="row-fluid">


<?php $cat_id = 10; //the certain category ID
$latest_cat_post = new WP_Query( array('posts_per_page' => -1, 'orderby' => rand, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post();  ?>


<div class="span4" style="text-align:center;background-color:#999999;margin-bottom:20px;">

<a class="" href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
<span><a style="color:#5a5a5a;" class="" href="<?php the_permalink() ?>"><h5 class="lead"><?php the_title(); ?></h5></a>
</span>


</div>


<?php endwhile; endif; ?>



</div><!--row-fluid-->

Answer 1

您只需要覆盖span4班级的左边距。

通过添加<style>标记margin-left:20px（或您喜欢的任何内容），行均匀对齐。

这是working example。

Answer 2

有关grid system的文档指出：

默认的Bootstrap网格系统使用12列[...]这是一个12列网格，每个.span *跨越这12列中的一些，并且每行最多应加12（或列数在父母）。

意味着您的HTML应该更像：

<div class="row-fluid" style="">
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
</div>
<div class="row-fluid" style="">
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
    <div class="span4" style="text-align: center; background-color: #999999; margin-bottom: 20px;">
        <!-- removed content -->
    </div>
</div>

Answer 3

想出来了！

<?php $cat_id = 10; //the certain category ID

    $latest_cat_post = new WP_Query( array('posts_per_page' => -1, 'orderby' => rand, 'category__in' => array($cat_id)));
    if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post();  
 $open = !($count%3) ? '<div class="threeacross">' : '';
    $close = !($count%3) && $count ? '</div>' : '';
    echo $close.$open;

?>


<div class="span4" style="text-align:center;background-color:#999999;margin-bottom:20px;">

<a class="" href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
<span><a style="color:#5a5a5a;" class="" href="<?php the_permalink() ?>"><h5 class="lead"><?php the_title(); ?></h5></a>
</span>


</div>


<?php endwhile; endif; ?>
<?php echo $count ? '</div>' : ''; ?>

Twitter Bootstrap对齐问题

3 个答案: