Question

您好，我在自定义帖子类型中上传的图像很少，作为特色图像，其中我试图将引导程序与Wordpress连接并在中并排显示图像> col-md-4 。但是当我这样做时，它会在新的ROW中显示图像，而不是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; ?>

Answer 1

您遇到循环问题，容器应在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

Answer 2

您在col-md-4之外使用过行吗？

Answer 3

Bootstrap 4使用“ Flex”来划分列，因此在使用 col 之前，我们需要使用行引导程序的早期版本将float用于 col ，因此可以在行中使用。

<div class = "portfolio-column-box">
    <div class = "container">
        <div class="row">
            <?php
            $loop = new WP_Query( array( 'post_type' => 'product', 'orderby' => 'post_id' ) );
            while($loop->have_posts()) : $loop->the_post(); 
                // Must be inside a loop.
                if ( has_post_thumbnail() ) { ?>
                    <div class = "col-md-4">
                        <?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
                    </div>
               <?php };
            endwhile; ?> 
        </div>
    </div>
</div>

希望这可以解决您的问题。

Answer 4

您要指定 col-md-4 ，该行将每行显示3列（details），每行显示3列后，应动态启动新行并您将在适当的网格中放置图像。尝试下面的代码，看看

<?php
$loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
$i = 0;
?>
<div class="row">;
<?php
while($loop->have_posts()) : $loop->the_post();
?>
        <div class="vc_col-md-4">
            <?php
                //print your image here
            ?>
        </div>
<?php       
    $i++;
    if ($i % 3 == 0) {
?>  
        </div><div class="row">
<?php       
    }       
endwhile;
?>
</div>

需使用col-md-4

4 个答案: