Bootstrap grid while loop

时间:2020-02-19 作者:Miikinki

我用bootstrap制作了一个网格,我想在其中显示5个不同的帖子,但出于某种原因,它复制了网格,并且每个网格显示一个帖子。Here you can see how it starts to duplicate the gridsThis is how i would like it to work

第一幅图显示了它如何开始将网格复制5次,而不是仅在这些列中显示5篇文章。第二张图片显示了我想如何工作。

    <?php get_header(); ?>


<main>
<div class="container">
  <div class="row"> <?php

$args = array(
<?php
\'post_type\' =>post_type\' => \'post,
\'posts_per_page\' => 5,
);

$blogposts = new WP_Query($args);

while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <a href="<?php the_permalink(); ?>
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>

    <div class="col-md-6">
      <a href="<?php the_permalink(); ?>">
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>



  <div class="row">
    <div class="col-md-4">
      <a href="<?php the_permalink(); ?>">

        <div class="card border-0">
          <div class="card-pic">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h3 class="card-title font-weight-bold"><?php the_title(); ?></h3>
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>

            </div>
          </div>

        </div>
      </a>
    </div>

    <div class="col-md-4">
      <a href="<?php the_permalink(); ?>">
        <div class="card border-0">
          <div class="card-pic">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="col-md-4">
      <a href="<?php the_permalink(); ?>">

        <div class="card border-0">
          <div class="card-pic">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>

    <?php }
wp_reset_query(); 

2 个回复
SO网友:WebElaine

你的while 循环的意思是,“每次我有一篇帖子,输出以下代码。”因为你有5个div在while loop,你每篇文章得到5份副本。所以,改变你的while { } 对此进行编码,每个帖子只输出1个div:

while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <a href="<?php the_permalink(); ?>
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>


    <?php }

SO网友:Miikinki

   while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <a href="<?php the_permalink(); ?>
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>


    <?php }
更改while循环使其显示我想要的5篇文章,但这些文章仍然不在引导列中。enter image description here下面的图片显示了我试图实现的目标。This is what i am trying to achieve.

相关推荐

Loop stopped working

我有一个巨大的问题,我打破了我的had,试图找到正确的解决方案。我有以下循环代码。此循环位于我的页面产品中。php文件:<?php $terms = get_the_terms( get_the_ID(), \'colour\' ); if ( $terms && ! is_wp_error( $terms ) ) : ?> <section class=\"colour__chart\"> <