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

Question

我目前正在开发一个 wp 主题项目，我正在尝试在 class= "span6" 上以 12 网格布局实现循环，这样它将生成我所有 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 */
}

我想这就是你要找的东西？