如何正确地连续添加到引导程序以修复移动到多行的网格系统

Posted 2023-03-04

【中文标题】如何正确地连续添加到引导程序以修复移动到多行的网格系统

【英文标题】：How to correctly add in a row to bootstrap to fix grid system moving onto multiple lines

【发布时间】：2017-10-21 06:17:56

【问题描述】：

我正在使用引导程序在我的首页上显示帖子。我的帖子在 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();

【问题讨论】：

你的代码中有哪些行？

什么意思？ .row 的 css？

<div class="row">

我目前没有。我试图弄清楚如何正确地将它们添加到我的首页。所以会有 2 行 col-md-4 和 1 行 col-md-12 等等。

***.com/a/40562841/3258604 您可以使用它并将其应用于您的代码

【参考方案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();