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>

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