在 Wordpress 中使用 Twitter Bootstrap 自动生成行答案

【问题标题】：Auto generate row with Twitter Bootstrap in Wordpress在 Wordpress 中使用 Twitter Bootstrap 自动生成行
【发布时间】：2013-04-29 04:51:14
【问题描述】：

早上好，我发现自己有点进退两难了！我正在使用 Twitter Bootstrap 创建一个 Wordpress 主题，我正在通过 Wordpress“帖子”为“认识团队”页面生成成员我只能在 1 行中放置 3 个条目... I.E

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

但是每行超过 3 个条目会破坏该行，因此我需要为每 3 个条目生成一个新行。我该怎么做？

这是我用于输出条目的 PHP 代码。

<?php query_posts('category_name=members&orderby=date'); ?>
<div class="row-fluid">
   <ul class="thumbnails">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <li class="span4">
          <div class="thumbnail">
          <?php // check if the post has a Post Thumbnail assigned to it.the_post_thumbnail();
          ?>
              <div class="pad">
                 <h3><?php the_title(); ?></h3>
                 <?php the_content(); ?>
              </div>
          </div>
       </li>
    <?php endwhile; ?>
     </ul>
  </div>
<?php endif; ?>

【问题讨论】：

标签： php css wordpress twitter-bootstrap

【解决方案1】：

试试这个

<?php query_posts('category_name=members&orderby=date'); ?>
<div class="row-fluid">
   <ul class="thumbnails">
      <?php 
      $cnt =0;
      if ( have_posts() ) : while ( have_posts() ) : the_post(); 
        if($cnt%3==0){
          echo "</ul></div><div class='row-fluid'><ul clsas='thumbnails'>";
        }

      ?>
      <li class="span4">
          <div class="thumbnail">
          <?php // check if the post has a Post Thumbnail assigned to it.the_post_thumbnail();
          ?>
              <div class="pad">
                 <h3><?php the_title(); ?></h3>
                 <?php the_content(); ?>
              </div>
          </div>
       </li>
    <?php 
    $cnt++;
    endwhile; ?>
     </ul>
  </div>
<?php endif; ?>

【讨论】：