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>
我当前的输出如下所示:在此处输入代码
文章图片
但是我真正想要的是这样的东西:
在这里输入代码
文章图片
有什么帮助吗?
#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 */
}
我以为那是你要找的东西吗?
推荐阅读
- 无法使用remove_action()从wordpress WooCommerce钩子中删除函数
- 我可以在WordPress自定义页面中设置会话吗
- 我可以在页面上添加特色图片(WordPress)
- 调用子目录中的页面模板
- JVM升级篇六(JVM内存模型)
- IDEA使用Docker,太香了!!
- 12.27-1.2博客精彩回顾
- 常用Git命令总结#yyds干货盘点#
- #yyds干货盘点#netty系列之:请netty再爱UDT一次