Twitter bootstrap Twitter引导对齐问题

我希望博客文章以三行的形式填充主页。前三篇金发女郎的帖子显示得很好，但之后博客帖子被关闭了。我想为每个职位的垂直排列以及水平。你可以看到一个例子

我是否需要为每三个帖子添加一行？我不知道我怎么能把它编码进去

<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-->

---

您只需覆盖

span4

类的左边距即可

通过添加一个

标记，该标记带有

左边距：20px

（或任何您想要的），行将均匀对齐

---

以下是一份关于下列州的文档：

默认引导网格系统使用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>

算出了

<?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>' : ''; ?>

如果我添加一个左边距：20px（或类似的东西），它们会对齐，但不会在页面上居中。此外，在缩小窗口时，这也会破坏响应能力。还有其他想法吗？您只需要调整页面的

CSS

，以及尝试创建的页面的引导默认值。我建议使用Bootstrap定制器并阅读

CSS

指南。我明白这一点，但我怎么能从一个类别中调用9个帖子，但将每3个帖子分隔成一行？提供的解决方案对于静态内容非常有效，但我需要弄清楚如何调用多篇文章，但每三篇文章都要排成一行。您必须记住的唯一规则是网格系统使用12列。因此，在您的案例中，每出现3次（因为您想使用

span4

），您就必须生成一个新的

行

。好的，您知道如何在使用我正在使用的php时实现这一点吗？我对WordPress不太熟悉，但我猜有点脏，比如

if（$latest_cat_post->current_post%3==0）echo'可能应该这样做。