如何正确地将一行添加到 bootstrap 以修复移动到多行的网格系统

Question

我正在使用 bootstrap 在首页上显示 post。我的 posts 在 2 行 3 posts 和 1 大 post 之间交替。一切看起来都不错，除了我注意到如果其中一个 post 中有更长的标题或摘录，那么页面的其余部分就会乱七八糟（如下例）。经过研究，我注意到最好的解决方案是使用 row 和 clear fix。但是，每次我尝试添加 div 行时，我似乎都没有正确放置它。（我在构建 front-page.php 时得到了一些帮助，所以我不知道添加它的正确方法）任何人都可以帮助我正确地将 div 行添加到我的 front-page.php?非常感谢，几周来我一直在努力寻找解决方案！

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

它应该是什么样子...

当我有一个 post 的标题（或摘录）持续到多行时它看起来如何...

如您所见示例 post 12 一直移动到右侧（它应该在左侧的位置）示例 post 13 和 14 移到下方。

我的front-page.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 个小博客添加一行 post。

<?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();

如何正确地将一行添加到 bootstrap 以修复移动到多行的网格系统

How to correctly add in a row to bootstrap to fix grid system moving onto multiple lines

php

jquery

clearfix

twitter-bootstrap

twitter-bootstrap-3