Question

我在WP网站上使用自定义帖子类型，也使用bootstrap。

我想在我的主页上列出5个自定义帖子类型条目，我希望前3个在一行中包含类col-md-4，在下一行中有2个cpt条目以使类col-md- 6

目前我有一个类col-md-4，第二行中的2个项目不能很好地居中。

这是我目前的代码：

<div class="container-fluid gray-section">
                <div class="container">
                    <div class="row">
                        <?php 
                        $projects = get_posts(array('post_type'=>'project','posts_per_page'=>5, 'order'=>'ASC'));
                        if ($projects) { ?>
                            <ul class="list-unstyled">
                                <?php foreach ($projects as $post) { setup_postdata( $post ) ?>
                                <li class="col-md-4 col-sm-6 col-xs-12 col-xxs-12 text-center ">
                                    <a class="highlights-item" href="<?php echo get_permalink(); ?>">
                                        <div class="highlights-container">
                                                    <?php the_post_thumbnail(); ?>
                                                    <span class="highlights-title">
                                                        <?php the_excerpt(); ?>
                                                    </span>
                                        </div>
                                    </a>
                                </li>
                                                    <?php } wp_reset_postdata(); ?>
                            </ul>
                                            <?php }
                                ?>  

                            </div> <!-- end row -->
                        </div> <!-- end container -->
                    </div> <!-- end container fluid -->

有任何建议如何解决这个问题？

Answer 1

这种问题通常通过向foreach循环添加计数并每次添加1来解决。然后在循环中，您可以检查计数是什么并应用特定的类。 e.g。

<div class="container-fluid gray-section">
    <div class="container">
        <div class="row">
            <?php 

            $projects = get_posts(
                array(
                    'post_type'=>'project',
                    'posts_per_page'=>5, 
                    'order'=>'ASC'
                )
            );

            if ($projects) { $count = 1; ?>
                <ul class="list-unstyled">
                    <?php foreach ($projects as $post) { 

                    setup_postdata( $post );
                    if( $count >= 4 ) { $extra_class = 'col-md-6'; }
                    else { $extra_class = 'col-md-4'; }

                    ?>
                            <li class="<?php echo $extra_class; ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
                                <a class="highlights-item" href="<?php echo get_permalink(); ?>">
                                    <div class="highlights-container">
                                        <?php the_post_thumbnail(); ?>
                                        <span class="highlights-title">
                                            <?php the_excerpt(); ?>
                                        </span>
                                    </div>
                                </a>
                            </li>
                        <?php $count++; } wp_reset_postdata(); ?>
                        </ul>
                                        <?php }
                            ?>  

                        </div> <!-- end row -->
                    </div> <!-- end container -->
                </div> <!-- end container fluid -->

给它一个去......

此致

丹

Answer 2

<?php 
$i = 0;
foreach ($projects as $post) { setup_postdata( $post ) 
?>
<li class="<?php echo ($i>2):'col-md-6'?'col-md-4' ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
 <?php 
 $i++;
 } 
 wp_reset_postdata(); 
 ?>

具有引导程序和自定义帖子类型的2行中的不同列宽

2 个答案: