Bootstrap Wordpress主題開發-如何使用WP循環在span12布局中生成span6

Question

我目前正在從事wp主題項目，並且我正在嘗試在12網格布局中的class =“ span6”上實現循環，這樣它將生成我所有wp帖子的2 col雜志網格結構。 但不同的跨度6不會正確對齊，只有前兩個對齊良好。 在靜態頁面中，我通常會像這樣實現網格布局：

<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 */
}

我以為那是您要找的東西嗎？