PHP i++ 在 x 个帖子下时未关闭 div

Question

我正在尝试创建动态选项卡式内容切换器。我正在使用 WordPress 来处理内容，在关闭它并转到下一行之前，我需要计算我在一行中显示的帖子数。

HTML 输出给出了这个：

<div id="menu1" class="tab-pane fade in">
      | <div class="row">
      |       | <div class="bookshelf">
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       | </div>
      | </div>
</div>
<div id="menu2" class="tab-pane fade in">
      | <div class="row">
      |       | <div class="bookshelf">
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       |       | <div class="col-md-3">
      |       |       | </div>
      |       | </div>

<!-- This one should be closed -->

      |       | <div id="menu3" class="tab-pane fade in">

（菜单 1 = 正确，菜单 2 = 未关闭）

Menu2 没有关闭，因为该行只有 1,2 或 3 个帖子。

目前我在menu1、menu2、menu3代码之间使用以下代码：

<?php
    $query = new WP_Query( array( 'post_type' => array( 'post_type' ) ) );

    $i=0;
    while ( $query->have_posts() ) : 
        $query->the_post();
        $publiceerdatum = get_post_meta(get_the_ID(), 'publiceerdatum'); 
        $image = get_post_meta(get_the_ID(), 'image' );
        if(is_array($image)) {
             $imagelink = $image[0];        
        }

        if ($i%4==0) 
            echo '<div class="row"><div class="bookshelf">';
        ?>

            <div class="col-md-3">
                <center>

                <a href="<?php echo get_post_meta($post->ID, 'url', true) ?>">
                    <img src="<?php echo get_post_meta($post->ID, 'image', true) ?>" class="img-samenspraak" alt="Bekijk <?php the_title(); ?>"/>
                </a>


                <a href="'<?php the_permalink(); ?>" class="" >
                    <h4>
<?php 
    if (strlen($post->post_title) > 50) {
        echo substr(the_title($before = '', $after = '', FALSE), 0, 50) . '...'; 
    } else {
        the_title();
    } ?>
                    </h4>
                </a>
                </center></div>
   <?php 
        if (($i%4==1)) echo '';
        elseif (($i%4==2)) echo '';
        elseif (($i%4==3)) echo '</div></div>';              

        $i++;
    endwhile;
?>

<?php 
    wp_reset_query(); 
?>

有人知道我做错了什么吗？

Answer 1

您将在 4 col-md-3 div 后关闭 row。
当你只有 2 col-md-3 div（如 menu2）时，你永远不会关闭 row.

试试这个：

$i=0;
while ($query->have_posts()) :
    [...Do your stuff...]

    if ($i%4 == 0) {
    // It's a new row
        echo '<div class="row">
            <div class="bookshelf">';
    }
    ?>

                <div class="col-md-3">
                    [...Other stuff...]
                </div>

    <?php

    $i++; // This is the number of "col-md-3" you have

    if ($i%4 ==0) {
    // You have multiple of 4 div, then you must close the row
        echo '</div></div>';  
    }
endwhile;

if ($i%4 != 0) {
// Here: you finished your menu, but the last row has not multiple of 4 div:
// it was not closed in the previous "if" statement. Close it now.
    echo '</div></div>';
}

PHP i++ 在 x 个帖子下时未关闭 div

PHP i++ not closing enough div's when under x posts

php

wordpress

count

twitter-bootstrap