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

我目前正在从事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正确对齐?
【Bootstrap WordPress主题开发-如何使用WP循环在span12布局中生成span6】我注意到问题来自`.row-fluid`左边距, 我也检查了这个, 这个以及更多… 但是没有人回答我关于在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>

我当前的输出如下所示:在此处输入代码
Bootstrap WordPress主题开发-如何使用WP循环在span12布局中生成span6

文章图片
但是我真正想要的是这样的东西:
在这里输入代码
Bootstrap WordPress主题开发-如何使用WP循环在span12布局中生成span6

文章图片
有什么帮助吗?
#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 */ }

我以为那是你要找的东西吗?

    推荐阅读