用 col-md-4 显示的 Wordpress 图像答案

【问题标题】：Wordpress images to be shown with col-md-4用 col-md-4 显示的 Wordpress 图像
【发布时间】：2019-01-04 06:43:18
【问题描述】：

大家好，我在自定义帖子类型作为特色图片上传了几张图片，我正在尝试将 bootstrap 与 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; ?>

【问题讨论】：

可能是图片的宽度太大了。您是否将图像设置为 100%？
你使用的是 bootstrap 3 还是 boorstrap 4 ？
@charankumar：我正在使用引导程序 4
@DaBra : 我没有设置为 100%

标签： php wordpress bootstrap-4 col

【解决方案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版本

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

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

【讨论】：

我尝试了 bot 解决方案.. 但它仍然在新行而不是 3 列中显示图像
那你需要检查一下为portfolio-column-box申请的css是什么，可能是你申请了display:block之类的

【解决方案2】：

您是否在 col-md-4 之外使用过 row？？

【讨论】：

【解决方案3】：

Bootstrap 4 使用“Flex”来划分列，所以我们需要在使用 col 之前使用 row 以前版本的引导程序使用 float 表示 col，因此它可以在没有 row 的情况下工作。

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

希望这能解决您的问题。

【讨论】：

【解决方案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>

【讨论】：