Bootstrap сетка в петле

Question

Я пытаюсь сделать что-то вроде изображения.

Я использую WordPress и woocommerce и хотел бы отображать такие продукты.

Это нормальный html, который делает работу.

Мне нужно быть в состоянии поместить его в al oop:

<div class="container" style="width: 100%">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Span 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <div>Span 2</div>
      <div>Span 2</div>
      <div>Span 2</div>
    </div>
  </div>
</div>

Я использую сетку bootstrap. css

Вот что я сделал:

while ($loop->have_posts()) : $loop->the_post();
    if ($product_counter < $product_counter_max) {
        if ($grid_counter == 0) { ?>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
                <?php echo get_the_title();
                $product = wc_get_product($loop->post->ID);
                /**reviews**/
                $average = $product->get_average_rating($loop->post->ID);
                $review_count = $product->get_review_count($loop->post->ID);

                if ($average != 0) {
                    for ($x = 0; $x < 5; $x++) {
                        if ($x < $average) {
                            echo '<i class="fa fa-star swatchchecked"></i>';
                        } else {
                            echo '<i class="fa fa-star"></i>';
                        }
                    }//for loop
                }//end of if
                else {
                    echo "No Rating Yet";
                }//end of reviews
                echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
                ?>
            </div>
            <?php
        } else {
        ?>
            <div style="clear: both">there</div>
                <?php
            }
        }
    $grid_counter++;
    $product_counter++;
    endwhile;
} else {
    echo __('No products found');
}
wp_reset_postdata();

Я не уверен, как заставить маленькие предметы складывать 3 друг на друга, как на картинке

Пожалуйста, помогите!

Answer 1

Итак, вот способ создать макет сетки, который вы хотите. Хотя мелкие детали не включены в этот ответ, то, что я вам предоставляю, должно дать вам достаточно представления о том, как настроить внутренние части так, как вы хотите, чтобы эти части располагались.

Если бы это был я ... Я бы настроил его так, чтобы с вашей увеличенной сеткой вы могли создавать различные макеты для столбцов 1 и 3 по сравнению со столбцами 2 и 4. Но, как я уже сказал, это должно направить вас в правильном направлении.

// Not sure why you are using a counter value when you can 
// set the loop to return whatever you want. But you didn't show your loop
$product_counter_max = 8;
// Set grid counter at 1;
$grid_counter = 1;
$product_counter = 0;

echo '<div class="row">';
if ($loop->have_posts()){
    while ($loop->have_posts()) : $loop->the_post();
        // This next line could be superflous based on earlier comment
        if ($product_counter < $product_counter_max) {
            if ($grid_counter == 1 || $grid_counter == 5 ) {
                echo '<div class="col-3">'; 
            } else {
                // Add an extra wrapper div around the second and fourth column
                if ($grid_counter == 2 || $grid_counter == 6 ) echo '<div class="col-3">';
                    // This is an inner column
                    echo '<div class="col-12">';
            }?>
                    <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
                    <?php echo get_the_title();
                    $product = wc_get_product($loop->post->ID);
                    /**reviews**/
                    $average = $product->get_average_rating($loop->post->ID);
                    $review_count = $product->get_review_count($loop->post->ID);

                    if ($average != 0) {
                        for ($x = 0; $x < 5; $x++) {
                            if ($x < $average) {
                                echo '<i class="fa fa-star swatchchecked"></i>';
                            } else {
                                echo '<i class="fa fa-star"></i>';
                            }
                        }//for loop
                    }//end of if
                    else {
                        echo "No Rating Yet";
                    }//end of reviews
                    echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
                    ?>
                </div>
                <?php
                if ($grid_counter == 4 || $grid_counter == 8 ) echo '</div>';
        }       
        $grid_counter++;
        $product_counter++;
        endwhile;
    } else {
    echo __('No products found');
}
wp_reset_postdata();

echo '</div>';