php - 如何正确添加一行到 Bootstrap 以修复网格系统移动到多行

Question

我正在使用 bootstrap 在我的首页上显示帖子。我的帖子在 2 行 3 个帖子和 1 个大帖子之间交替。一切看起来都不错，除了我注意到如果其中一篇文章中有较长的标题或摘录，那么页面的其余部分就会变得困惑(下面的示例)。经过研究，我发现最好的解决方案是使用行和清除修复。然而，每次我尝试添加行的 div 时，我似乎都错误地放置了它。 (我在构建我的 front-page.php 时得到了一些帮助，所以我不知道添加它的正确方法)任何人都可以帮助我正确地将 div 行添加到我的 front-page.php 中吗？我将非常感激，我已经尝试寻找解决方案数周了!

我尝试过寻找这里问题的不同解决方案，但我仍然无法正确更改我自己的代码。因此，如果有人能提供帮助，我们将不胜感激。

它应该是什么样子...

当我的帖子的标题(或摘录)多行时，它看起来如何......

正如您所看到的，示例帖子 12 一直移动到右侧(它应该在左侧)示例帖子 13 和 14 移到了下方。

我的首页.php

<?php
    /*
     * Template Name:
     */

    get_header();
    get_template_part ('inc/carousel');

    $the_query = new WP_Query( [
        'posts_per_page' => 14,
        'paged' => get_query_var('paged', 1)
    ] );

    if ( $the_query->have_posts() ) { 
?>
<div id="ajax">
    <?php
        $i = 0;
        while ( $the_query->have_posts() ) { 
            $the_query->the_post();

            if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... 
    ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
    <div class="large-front-container">
        <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
    </div>
    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
    <div class="front-page-post-info">
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
        <?php get_template_part( 'front-shop-the-post' ); ?>
        <?php get_template_part( 'share-buttons' ); ?>
        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
    </div>
</article>
<?php

} else { // Small posts 
?>
<article <?php post_class( 'col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
     <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
     <?php get_template_part( 'front-shop-the-post' ); ?>
     <?php get_template_part( 'share-buttons' ); ?>
     <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
     }
         $i++;
     }
?>
</div>
<?php 
    if(get_query_var('paged') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

Answer 1

您可以创建另一个变量 $j = 0 并每第 3 个小博客文章添加行。

<?php
/* 
 * Template Name: 
 */

get_header();
get_template_part('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );


if ($the_query->have_posts()) {
?> 
<div id="ajax"> 
<?php
    $i = 0;
    $j = 0;
    while ($the_query->have_posts()) {
        $the_query->the_post();

        if ($i % 7 === 0) { // Large post: on the first iteration and every 7th post after... 
?> 
<div class="row"> 
<article <?php
            post_class('col-sm-12 col-md-12');
?>> 
<div class="large-front-container"> 
<?php
            the_post_thumbnail('full', array(
                'class' => 'large-front-thumbnail'
            ));
?> 
</div> 
<h2><a class="front-page-post-title" href="<?php
            the_permalink();
?>"><?php
            the_title();
?></a></h2> 
<p class="front-page-post-excerpt"><?php
            echo get_the_excerpt();
?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php
            the_permalink();
?>">Read more</a> 
<?php
            get_template_part('front-shop-the-post');
?> 
<?php
            get_template_part('share-buttons');
?> 
<div class="front-comments"><?php
            comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div> 
</div> 
</article> 
</div> 

<?php

        } else { // Small posts 
?> 
<?php
            if ($j % 3 === 0)
                echo '<div class="row">';
?> 
<article <?php
            post_class('col-md-4');
?>> 
<?php
            the_post_thumbnail('full', array(
                'class' => 'medium-front-thumbnail'
            ));
?> 
<h2><a class="front-page-post-title" href="<?php
            the_permalink();
?>"><?php
            the_title();
?></a></h2> 
<p class="front-page-post-excerpt"><?php
            echo get_the_excerpt();
?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php
            the_permalink();
?>">Read more</a> 
<?php
            get_template_part('front-shop-the-post');
?> 
<?php
            get_template_part('share-buttons');
?> 
<div class="front-comments"><?php
            comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div> 
</div> 
</article> 

<?php
            $j++;
            if ($j % 3 === 0)
                echo '</div>';
?> 
<?php
        }
        $i++;
    }
?> 

</div> 
<?php
    if (get_query_var('paged') < $the_query->max_num_pages) {
        load_more_button();
    }
} elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();