时间戳

首页 > 解决方案 > Add this loop into col-4 bootstrap grid layout

php - Add this loop into col-4 bootstrap grid layout

问题描述

Hi Guys I'm trying to format this WordPress loop into a col-4 bootstrap layout but I'm having no luck. Can anyone please help? Im trying to display each "bucket-top-row" div into a col-4 layout.

 <div class="container">
<?php
            // get all the categories from the database
            $cats = get_the_category();

                // loop through the categries
                foreach ($cats as $cat) {
                    // setup the cateogory ID
                    $cat_id= $cat->term_id;
                    // Make a header for the cateogry
                    // echo "<h2>".$cat->name."</h2>";
                    // create a custom wordpress query
                    query_posts("cat=$cat_id&posts_per_page=10");
                    // start the wordpress loop!
                    if (have_posts()) : while (have_posts()) : the_post();
                    ?>



    <div class="bucket-top-row row">
        <div class="col-lg-4">
            <div class="bucket-wrapper-standard-top-row">
                <img class="image-bucket-standard" src="<?php echo get_template_directory_uri() . '/images/blog-images/hero-img-1.jpg'; ?>" />
               <h4 id="post-<?php the_ID(); ?>" class="bucket-text-standard">
                    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h4>
                <p class="bucket-paragraph">
                <?php /* the_permalink() */?>
                </p>
                <div class="author-text-bucket">
                    <div class="author-image six-sm">
                        <img class="author-img-post" src="<?php echo get_template_directory_uri() . '/images/author-headshots/fitness-mark.png'; ?>" />
                    </div> <span class="author-name-post-bucket "><?php> the_author(); ?></span>
                    <span class="bucket-category"><?php> the_category(); ?></span>

                    <div class="lower-bucket-text">
                        <span class="author-job-title-bucket "><?php> the_author_nickname(); ?></span>
                        <span class="bucket-read-time">3min read</span>
                    </div>
                    <div class="underline-bucket"></div>
                </div>
            </div>
        </div>
</div>



<?php endwhile; endif; // done our wordpress loop. Will start again for each category ?>
                <?php } // done the foreach statement ?>

Boxes should display 3 across (col-4)

标签： phpwordpressbootstrap-4

解决方案

<div class="container">
    <div class="bucket-top-row row">
        <?php
        // get all the categories from the database
        $cats = get_the_category();

        // loop through the categries
        foreach ($cats as $cat) {
        // setup the cateogory ID
        $cat_id= $cat->term_id;
        // Make a header for the cateogry
        // echo "<h2>".$cat->name."</h2>";
        // create a custom wordpress query
        query_posts("cat=$cat_id&posts_per_page=10");
        // start the wordpress loop!
        if (have_posts()) : while (have_posts()) : the_post();
        ?>



        <div class="col-lg-4">
            <div class="bucket-wrapper-standard-top-row">
                <img class="image-bucket-standard" src="<?php echo get_template_directory_uri() . '/images/blog-images/hero-img-1.jpg'; ?>" />
                <h4 id="post-<?php the_ID(); ?>" class="bucket-text-standard">
                    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h4>
                    <p class="bucket-paragraph">
                        <?php /* the_permalink() */?>
                    </p>
                    <div class="author-text-bucket">
                        <div class="author-image six-sm">
                            <img class="author-img-post" src="<?php echo get_template_directory_uri() . '/images/author-headshots/fitness-mark.png'; ?>" />
                        </div> <span class="author-name-post-bucket "><?php> the_author(); ?></span>
                        <span class="bucket-category"><?php> the_category(); ?></span>

                        <div class="lower-bucket-text">
                            <span class="author-job-title-bucket "><?php> the_author_nickname(); ?></span>
                            <span class="bucket-read-time">3min read</span>
                        </div>
                        <div class="underline-bucket"></div>
                    </div>
                </div>
            </div>



            <?php endwhile; endif; // done our wordpress loop. Will start again for each category ?>
            <?php } // done the foreach statement ?>
        </div>

推荐阅读