bootstrap 和自定义 post 类型的 2 行中的不同列宽

Question

我在我的 WP 网站上使用自定义 post 类型，并且还使用 bootstrap。

我想在我的主页上列出 5 个自定义 post 类型的条目，我希望前 3 个在一行中有 class col-md-4，在下一行中有 2 cpt 条目具有 class col-md-6

目前我有一个 class 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

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

Answer 2

这种问题通常通过在foreach循环中增加一个计数，每次加1来解决。然后在循环中，您可以检查计数是多少并应用特定的类。例如

<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 -->

试一试...

此致

段

bootstrap 和自定义 post 类型的 2 行中的不同列宽

Different column width in 2 rows with bootstrap and custom post types

css

wordpress

twitter-bootstrap