WordPress Loop im Bootstrap Grid

Question

Ich habe einen benutzerdefinierten Beitragstyp namens "Dienste" und möchte das vorgestellte Bild von jedem in einem Raster anzeigen - Mein Problem ist nicht, wie dies zu tun ist, es ist mehr, wie Sie die Schleife arbeiten mit Bootstrap-Zeilen. Ich möchte eine Reihe von 3 auf dem Desktop und 2 auf dem Tablet (991px), so dass mein HTML auf der div col-xs-6 col-sm-4 ist. Dies ergibt jedoch ein ungerades Ergebnis bei 991px Bildschirmgröße. Was ich bekomme ist das: . Das vorgestellte Bild an der linken unteren Ecke sollte also tatsächlich dort sein, wo die "unerwünschte Lücke" liegt. Es scheint, dass mein Code die Zeile sagt, um nach 3 Zeilen auf jeder Bildschirmgröße zu schließen, so dass es meine col-xs-6-Regel ignoriert.

Mit nur HTML auf einer Dummy-Seite tut Col-xs-6 col-sm-4 dies nicht und es funktioniert wie erwartet mit geraden Reihen von 2 auf 991px-Bildschirme.

Mein vollständiger Code ist unten, wie ich nicht kmnow, um eine Schleife in BS-Zeilen zu integrieren, habe ich tatsächlich diesen Code von hier Wordpress posts in grid view with Bootstrap 3 columns gegriffen.

Die countbang Teile müssen das Problem hier sein, aber das Ändern dieser auf verschiedene Werte behebt das Problem nicht. Wenn ich den letzten countbang-Verweis auf 2 statt auf 3 ändere, setzt dies die Zeile so, dass auf Desktop und Tablet 2 Zeilen angezeigt werden, was nicht richtig ist, aber sogar auf dem Tablet, obwohl das Problem dadurch gelöst wird Ort.

<?php 
$countturtle = 0 ; 
$countbang = 0 ; 
$count_posts = wp_count_posts('services')->publish; 
$args = array('post_type' => 'services', 'posts_per_page' => 6); 
$loop = new WP_Query($args); 
while ($loop->have_posts()) : $loop->the_post(); ?> 
<?php $countbang++ ?> 

<?php if ($countbang >= 2) { 
    $countturtle = $countturtle + 1 ; } ?> 
<?php if ($countbang == 1) { 
    echo '<div class="row">'; } elseif (($countturtle % 3) == 0) { 
    echo '<div class="row">'; } ; ?> 

<a href="<?php the_permalink() ?>"> 
<div id="post-grid-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-xs-6 col-sm-4 col-padding-0" > 
<div id="color-overlay"></div> 
    <?php if (has_post_thumbnail()) { 
     $image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),’thumbnail’); 
      echo '<img width="100%" class="fet-img" src="' . $image_src[0] . '">'; 
     } 
    ?> 
    <p class="overlay-text"><?php the_title(); ?></p> 
</div><!-- #post-grid --> 
    </a> 
<?php if ($countbang % 3 == 0) { 
    echo '</div>'; } 
    elseif ($countposts == $countbang) { echo '</div>';} ; ?> 
<?php endwhile; ?> 

Answer 1

Verwenden array_chunk Funktion

So, Ihr Code werden:

$countbang = 0 ; 
    $count_posts = wp_count_posts('services')->publish; 
    $args = array('post_type' => 'services', 'posts_per_page' => 6); 

    $chunks = array_chunk($loop, 2); //it chunk $loop array into arrays with 2 elements. 

     while($chunks as $row){ 
      echo "<div class='row'>"; //open row 
      while($row as $post){ 
      $countbang++; 
      <a href="<?php the_permalink() ?>"> 
      <div id="post-grid-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-xs-6 col-sm-4 col-padding-0" > 
      <div id="color-overlay"></div> 
      <?php if (has_post_thumbnail()) { 
       $image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),’thumbnail’); 
       echo '<img width="100%" class="fet-img" src="' . $image_src[0] . '">'; 
      } 
      ?> 
      <p class="overlay-text"><?php the_title(); ?></p> 
      </div><!-- #post-grid --> 
      </a> 
      <?php 
      } 
      echo "</div>"; //close row 
     }