Question

嗨，我正在尝试将此WordPress循环格式设置为col-4引导程序布局，但是我没有运气。谁能帮忙吗？我试图将每个“ bucket-top-row” div显示为col-4布局。

 <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 ?>

框应在（col-4）中显示3个

Answer 1

<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>

将此循环添加到col-4引导网格布局中

1 个答案: