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

  • Z时代
  • 2024-01-10
  • 分类：IT

我目前正在从事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`左边距, 我也检查了这个, 这个以及更多…但是没有人回答我关于在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布局中生成span61

但是我真正想要的是这样的东西：

在这里输入代码

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

有什么帮助吗？

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

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

以上是 Bootstrap WordPress主题开发-如何使用WP循环在span12布局中生成span6 的全部内容， 来源链接： utcz.com/p/202265.html

回到顶部