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

只需移动rowThe 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>

最后一个示例将确保清除所有浮动,并且每行元素都在各自的行上.