bootstrap - wordpress 网格

Question

我正在使用引导程序制作 wp 自定义主题。我实现了一个网格来显示最新的帖子。我想为更大的屏幕连续显示 4 个项目（低至 768px = col-sm-3），然后每行显示 2 个项目（col-xs-6）。它有点工作，但在某些时候项目没有正确显示。特别是，当屏幕宽度在 1200 - 768 或小于 579 之间时，每 4 行有 1 行被破坏，并且仅显示 1 个项目（见图）。我不确定问题出在哪里。

我读到了 .cleardiv 类，但我不明白我应该把它放在哪里。

您可以查看网站here。 （请注意，带有 4 个项目的第一行工作正常，因为它是在不同行中的其他 12 个项目之前生成的）。只需单击“v”箭头即可显示存在问题的行。 谢谢

<section class="bg-white" id="in_evidenza">
    <div class="container">
        <!-- this is the first row which is always visible. no issue here -->
        <div class="row"> ...
        </div>
        <!-- second row: issue here -->
        <div class="row" id="news-content">
            <?php
            $args = array( 'numberposts' => '12', 'category_name' => 'news', 'orderby' => 'date', 'offset' => '4' );
            $recent_posts = wp_get_recent_posts( $args );
            $i = 1;
            foreach( $recent_posts as $recent ):
                $post_img_src = "http://www.assatena.it/testbs/wordpress/wp-content/uploads/2016/03/".$i.".png";
                $post_title = $recent["post_title"];
                $post_id = $recent["ID"];
                $post_content = get_post_field('post_content', $post_id);
                $post_date = get_the_date("d/m/Y", $post_id);

                if(strlen($post_title) >= 19){
                    $post_title_short = substr($post_title, 0, 19);
                    $post_title_short.="...";
                }else
                $post_title_short = $post_title;

                $teaser = substr(strip_tags($post_content), 0, 66);
                $teaser.=" . . .";

            ?>  
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6" id="col-news-all">
                <div class="text-center">
                    <img class="img-rect" width="160" height="100" alt="" src='<?php echo $post_img_src; ?>' />

                    <h3><?php echo $post_title_short; ?></h3>   
                    <p> 
                        <?php echo $teaser; ?>
                        <br> <!-- open -->
                        <a data-toggle="modal"  href="" data-target="#modal-news-<?php echo $post_id; ?>">
                            <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
                        </a>
                    </p>
                </div>
            </div>
            <div id="modal-news-<?php echo $post_id; ?>" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1">
                <div class="modal-content">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-10 col-lg-offset-1">
                                <div class="modal-body">
                                    <h2><?php echo $post_title; ?></h2>
                                    <p class="post_date">- <?php echo $post_date; ?> -</p>
                                    <hr class="star-primary">
                                    <img id="news_img" class="img-responsive img-modal" alt="News img" src="<?php echo $post_img_src; ?>" />
                                    <div class=" text-left">
                                        <div class="my_post_content">
                                            <p><?php echo $post_content; ?></p>
                                        </div>
                                    </div>
                                    <div class="text-center"> <!-- close -->
                                        <a data-dismiss="modal" class="btn btn-success btn-xl ">Chiudi</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php
            $i%=4;
            $i++;
            endforeach;
            ?>
        </div> <!-- row -->
        <div class="text-center">
            <a data-toggle="modal"  href="" data-target="">
                <span id="news-all" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </a>
        </div>
    </div> <!-- container -->
</section>

图片：

Answer 1

在你的$i++ 之前写一个 if 语句来放置一个 clearfix

<?php if ($i % 4 == 0); ?>
<div class="clearfix"></div>
<?php endif; ?>

编辑：对于移动设备，您可以使用 $i % 2 == 0 设置另一个 clearfix 并通过 visible-xs 将其隐藏在桌面中