WordPress自定义post类型查询显示

Question

我有一个自定义 post 类型，我有一个查询，它工作得很好，除了它没有按照我想要的方式显示。我希望我的项目连续显示 3 个。我正在使用 Bootstrap 并且由于某种原因它堆叠它们而不是连续显示它们。我检查了标记，它正在为每个项目创建一个新的 div 和一个新行。我试过玩循环，但它仍然以相同的方式显示项目。这是我正在使用的代码：

<div class="container portfolio">  
    <?php  
      $args = array( 'post_type' => 'projects', 'posts_per_page' => 30);
      $the_query = new WP_Query( $args );
    ?>
    <?php if ( $the_query->have_posts() ) : ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="row js--wp-4">
      <div class="col-md-4">
        <div class="card">
          <img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
          <div class="overlay text-center">
            <h2 class="card-title"><?php the_title(); ?></h2>
            <p class="card-info"><?php the_field('short_desc'); ?></p>
            <div class="d-flex justify-content-center align-items-center">
                <a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
            </div>
          </div>
        </div>
      </div> 
    </div>
    <?php endwhile;
    wp_reset_postdata(); ?>
    <?php else: ?>
    <p><?php _e( 'Sorry there are no posts' ); ?></p>
    <?php endif; ?>   
  </div>

这里是它需要显示的方式：

这是它现在用三个 post 进行测试的显示方式：

Answer 1

已解决。我只是在循环中有行，它一直在新行中显示每个项目。糟糕，但这是正确的代码：

<div class="container portfolio"> 
        <?php  
          $args = array( 'post_type' => 'projects' );
          $the_query = new WP_Query( $args );
        ?>

        <div class=" row js--wp-4">

          <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>  

          <div class="col-md-4">                            
            <div class="card">          
              <img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
              <div class="overlay text-center">
                <h2 class="card-title"><?php the_title(); ?></h2>
                <p class="card-info"><?php the_field('short_desc'); ?></p>
                <div class="d-flex justify-content-center align-items-center">
                    <a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
                </div>
              </div>
            </div>                  
          </div> 
        
           <?php endwhile;
            wp_reset_query(); ?> 
            
        </div>         
    </div> 
   </div>

WordPress自定义post类型查询显示

WordPress custom post type query display

php

wordpress

twitter-bootstrap

custom-post-type