社区首页 >问答首页 >Wordpress的图片将用col 4显示。

问Wordpress的图片将用col 4显示。
EN

Stack Overflow用户

提问于 2018-07-26 23:27:20

回答 4查看 122关注 0票数 0

嗨，我有很少的图片上传到自定义post类型作为特色图像，在其中，我试图连接引导与Wordpress，并排显示图像在Colo-Md-4。但是当我这样做的时候，它会在新的行中显示图像，而不是显示-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; ?>

col

php

wordpress

bootstrap-4

回答 4

Stack Overflow用户

发布于 2018-07-26 23:30:55

您有循环问题，容器应该在外部而循环。

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

以上解决方案基于引导3版本。

如果您使用的是引导程序4，那么还需要包括"row“，如下所示

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

票数 1

Stack Overflow用户

发布于 2018-07-26 23:28:46

你在md-4外面用过吗？？

票数 0

Stack Overflow用户

发布于 2018-07-27 00:20:04

引导程序4使用"Flex“分隔列，所以我们需要使用行，然后才能使用col，以前的引导版本为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>