Question

使用bootstrap我将我的循环编码为3列网格布局：

<?php if (have_posts()) : ?>
 <?php while (have_posts()) : the_post(); ?>
      <div class="col-xs-4">
       //The content
      </div>
      <div class="col-xs-4">
       //The content
      </div>
      <div class="col-xs-4">
       //The content
      </div>
<?php endwhile; ?>

现在我需要在.row div：

之间包含每3列

<div class="row">
//loop of each three posts
</div>

Answer 1

您不需要关闭每一行，因为您正在使用Bootstrap：

如果在一行中放置的列数超过12列，则每组额外列将作为一个单元换行换行。

因此，您甚至不需要添加计数器：

<?php if (have_posts()) :
    echo '<div class="row">';
    while (have_posts()) : the_post(); ?>
        <div class="col-xs-4">
            //The content
        </div>
    <?php endwhile; 
    echo '</div>'
?>

但是，如果（出于某种原因）你实际做需要行，请添加一个简单的计数器：

<?php if (have_posts()) :
    $i = 1;
    echo '<div class="row">';
    while (have_posts()) : the_post(); ?>
        <div class="col-xs-4">
            //The content
        </div>
    <?php 
    if ( $i % 3 === 0 ) { echo '</div><div class="row">'; }
    $i++; 
    endwhile; 
    echo '</div>'
?>

Answer 2

试试这个。

<?php if (have_posts()) : 
    echo '<div class="row">';
    $i=0; 
    while (have_posts()) : the_post(); 
    $i++; 
    if($i%3==0)
    echo '</div><div class="row">';
    ?>
          <div class="col-xs-4">
           //The content
          </div>
          <div class="col-xs-4">
           //The content
          </div>
          <div class="col-xs-4">
           //The content
          </div>
<?php endwhile; ?>

Wordpress：在循环中的每第三个帖子中添加html代码

2 个答案: