bootstrap / Wordpress中每行3个元素

Question

我有以下问题：我需要创建非常简单的布局，在每一行我想拥有3个相同大小的盒子，如果我理解正确，为了实现这一点，我需要构建一个结构如下：

<div class="row">
   <div class=" news col-md-3 col-centered">
   </div>
   <div class=" news col-md-3 col-centered">
   </div>
   <div class=" news col-md-3 col-centered">
   </div>
</div>

这是我在index.php中的php脚本：

    <?php while(have_posts()) : the_post();?>
       <div class="row">
         <div class=" news col-md-3 col-centered">
          <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4>
          <p><?php the_excerpt(); ?> </p>
         </div>
       </div>
    <?php endwhile; wp_reset_query(); ?>

使用此代码，每个框都会获得如下所示的<div class="row">元素：

  <div class="row">
    <div class=" news col-md-3 col-centered">
    </div>
  </div>
...

我该如何解决这个问题？

这就是我现在得到的：如果一个盒子比另一个盒子更高，它会留下没有任何元素的空间。

盒子的高度取决于内容。我想拥有的是这样的：

Answer 1

只需将row移到The Loop之外，这样就不会重复：

<div class="row">
    <?php while(have_posts()) : the_post(); ?>
        <div class="news col-md-4 col-centered">
            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
            <p><?php the_excerpt(); ?> </p>
        </div>
    <?php endwhile; wp_reset_query(); ?>
</div>

此外，您需要将列宽更改为col-md-4，因为Bootstrap使用12列网格，并且您希望每行3列。

如果您需要在显示3列后实际关闭每一行，则需要使用计数器：

<div class="row">
    <?php $i = 1; while(have_posts()) : the_post();?>
        <div class="news col-md-3 col-centered">
            <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4>
            <p><?php the_excerpt(); ?> </p>
        </div>
        <?php if ( $i % 3 === 0 ) { echo '</div><div class="row">'; } ?>
    <?php $i++; endwhile; wp_reset_query(); ?>
</div>

最后一个示例将确保清除所有浮点数，并确保每行元素都在各自的行上。