Question

我正在使用Bootstrap开发WordPress网站。我想获得一个类别中的前三个帖子，然后遍历它们并将所有三个放在一行中。

问题是，当一个类别只有一个或两个帖子时，布局就会中断，因为没有为该页面写入div的标记。

<div class="row">
<?php
  foreach(array_slice($posts_array, 0, 3) as $post):
?>      
  <div class="col col-12 col-lg-4">
    <?php echo get_the_post_thumbnail(); ?>
    <?php echo $post->post_title; ?>
  </div>
<?php
   endforeach; 
?>
</div>

我需要这个来生成

<div class="row">
  <div class="col col-12 col-lg-4">
    <img src=image.jpg">
    Title
  </div>
  <div class="col col-12 col-lg-4">
    <img src=image2.jpg">
    Second Title
  </div>
 <div class="col col-12 col-lg-4">
    <img src=image3.jpg">
    Third Title
  </div>
</div>

但如果一个类别只有两个帖子，那么我得到

<div class="row">
  <div class="col col-12 col-lg-4">
    <img src=image.jpg">
    Title
  </div>
  <div class="col col-12 col-lg-4">
    <img src=image2.jpg">
    Second Title
  </div>
</div>

我确定这可能太难了，但我的大脑似乎并没有起作用。请帮忙！

Answer 1

计算数组，尝试查看是否$count % 3 == 0，如果没有，在末尾添加假数组元素，在代码中，只检查伪数组中的某些内容，表明它是否为实行，然后你可以显示一个空白框或其余元素的任何内容。

另一种方式是启动$ x = 1，并在循环内增加。

Answer 2

试试这个：

<div class="row">
 <?php
    $val = 3;
    $i = 1;
    foreach(array_slice($posts_array, 0, $val) as $post):
 ?>      
   <div class="col col-12 col-lg-4">
      <?php echo get_the_post_thumbnail(); ?>
      <?php echo $post->post_title; ?>
   </div>
 <?php
    $i++; endforeach; 
 ?>

 <?php for ($j = 0; $j < ($val - $i); $j++) { ?>
     // Your Extra Divs.
 <?php } ?>

填充所有div，即使阵列太短也是如此

2 个答案: