时间戳

首页 > 解决方案 > 用 col-md-4 显示的 Wordpress 图像

php - 用 col-md-4 显示的 Wordpress 图像

问题描述

大家好，我有一些以自定义帖子类型上传的图像作为特色图像，我试图将引导程序与 Wordpress 连接起来，并在col-md-4中并排显示图像。但是当我这样做时，它会在新行而不是 col-md-4 中显示图像

代码是...

      <?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
            while($loop->have_posts()) : $loop->the_post(); ?>




                            <?php
                            // Must be inside a loop.

                                if ( has_post_thumbnail() ) { ?>
                                <div class = "portfolio-column-box">
                                    <div class = "container">

                                    <div class = "col-md-4">
                                       <?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
                                    </div>
                                </div>
                            </div>

                                <?php };
                            ?>

                    </div>
                </div>


                    <?php endwhile; ?>

标签： phpwordpressbootstrap-4col

解决方案

你有循环问题，容器应该在while循环之外

      <div class = "container">
     <?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
        while($loop->have_posts()) : $loop->the_post(); ?>
                        <?php
                        // Must be inside a loop.

                            if ( has_post_thumbnail() ) { ?>
                            <div class = "portfolio-column-box">
                                <div class = "col-md-4">
                                   <?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
                                </div>
                            </div>
                        </div>

                            <?php };
                        ?>

                </div>
                <?php endwhile; ?> 
            </div>

以上解决方案基于bootstrap 3版本

如果您使用的是引导程序 4，那么您还需要包含“行”，如下所示

<div class="container">
<div class="row">
 //your loop here

推荐阅读