php - 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

只需将行移到循环之外，这样它就不会重复:

<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>

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