0

我正在使用 Roots 主题以在 Wordpress 中启用 Boostrap。但是，当我尝试在多行上以网格格式显示文章时遇到了问题。

例如，当循环通过<div class="span4>第四个 div 的四个实例时，不会整齐地换行到下一行。如何使用 Wordpress 循环并<div class="row">在循环运行 3 次后调用

4

1 回答 1

1

有几种好方法可以做到这一点。我个人建议使用 Zurb Foundation 的Block Grid之类的东西。对此的标记将允许您只<ul>为您的帖子使用普通的无序列表，并在将来的任何时候轻松更改列的数量，并允许您在断点处使用不同数量的列。

您也可以自己在 CSS 中创建此功能，但是，如果您想保留引导程序类并且只想在主题中始终将其硬编码为三行，您可以执行以下操作。基本上，使用变量跟踪您正在进行的 post 循环的迭代，并每三个帖子重置一次，创建行 div 并根据需要关闭它。

 <?php
    if ( have_posts() ) :
       $postCount = 0;
       $rowOpen = false;
       while ( have_posts() ) :
          the_post(); 
          if ($postCount == 0) :
             if ($rowOpen) : ?>
               </div> <!-- close the div for the row -->
             <?php endif; ?>
             <div class="row">
             <?php $rowOpen = true; 
          endif; ?>
          <div class="col-lg-4">
            <!-- here's where your post content goes, i.e.: -->
              <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
              <div class="entry">
               <?php the_content(); ?>
              </div>
          </div>
          <?php $postCount++;
          if ($postCount == 3) : # 3 because we've already incremented it
            $postCount = 0; # reset post count every third item
          endif;
        endwhile;
        if ($rowOpen) : ?>
          </div> <!-- close the div for the row -->
        <?php endif; 
      else : ?>
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
      <?php endif; ?>

我看到的问题是常规引导网格和常规基础网格需要一个行类来包含其列，所以我认为没有一种简单的方法可以在没有某种基于数量的条件的情况下列出帖子每行列数，以编程方式。仅 CSS 的解决方案会很棒，但如果不创建自己的网格或使用 Foundations 块网格，我不知道有一个解决方案。

于 2013-10-17T17:56:12.047 回答