Bootstrap Wordpress主题开发 - 如何使用WP循环在span12布局中生成span6

Question

我正在研究一个wp主题项目，我正在尝试在12格网布局中实现类=“span6”的循环，这样它将生成我所有wp帖子的2 col杂志网格结构。但不同的跨度六不会正确对齐，只有前两个对齐好。在静态页面中，我通常会像这样实现网格布局：

<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
...and so on

然而，由于着名的wp循环只需要一个span6我就不能用这种方法。

如何才能使其他span6生成正确对齐？

我注意到问题来自于`.row-fluid`左边距，我还检查了this，this还有更多......但没有人回答我关于生成的问题在wp循环中的span6

这就是我的页面：

<div class="span8">
   <?php if(have_posts()): while(have_posts()): the_post();?>
   <article class="span6">
       <div>
         //content goes in here
       </div>
    </article>
    <?php endwhile; else: ?>
    <p><h3>Sorry, No Post Available.</h3></p>
    <?php endif; ?>
</div>
<div class="span4">
 <?php get_sidebar()?>
</div>

我目前的输出看起来像这样 `在此处输入代码`

但我真正想要的是这样的事情：
`在此处输入代码`

请帮忙吗？

Answer 1

在这种情况下我通常使用的是$counter变量。将其放在the_post();

之后

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<?php
    //echo post here
    the_title();
    the_content();
?>

</div> <!-- close .post div -->

<?php
    $counter++;
    if ($counter % 2 == 0) {
    echo '<div style="clear:both;"></div>';
    }
?>


<?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

您用于上述代码的CSS将是：

.post{
    float:left;
    width:300px; /* width of the post */
}

我认为那就是你要找的东西？