PHP Bootstrap行循环每3个帖子 [英] PHP Bootstrap row loop every 3 posts

问题描述

尝试在包含3列的引导行中的存档页面上显示自定义帖子，然后开始新的一行，获得了代码，但对PHP来说是新的，并且不知道将内容放在何处.

Trying to display the custom posts on my archive page within a bootstrap row containing 3 columns then starting a new row, got the code but new to PHP and dont know where to put the content.

    <?php
        //Columns must be a factor of 12 (1,2,3,4,6,12)
        $numOfCols = 3;
        $rowCount = 0;
        $bootstrapColWidth = 12 / $numOfCols;
        ?>
        <div class="row">
        <?php
        foreach ($rows as $row){
        ?>  
                <div class="col-md-4"<?php echo $bootstrapColWidth; ?>">
                    <div class="thumbnail">
                        <img src="user_file/<?php echo $row->foto; ?>">
                    </div>
                </div>


        <?php
            $rowCount++;
            if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
        }
        ?>
        </div>


        <div class="embed-container">
        <?php the_field('podcast_embed_link'); ?>
        </div>



        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><h3><?php the_title(); ?></a></h3>


        <p><b><?php echo $date->format( $format_out );?></b></p>

        <p><?php the_field('description'); ?></p>

        <?php if( get_field('thumbnail') ): ?>

        <img src="<?php the_field('thumbnail'); ?>" />


        <?php endif; ?>

        <?php endwhile; // end of the loop. ?>


        </div>
    </div>
</div><!-- #content -->

这是页面archive.podcasts.php的代码，我将在行循环内的自定义字段添加到何处?

Here is the code for the page archive.podcasts.php, where would i add the custom fields within the row loop?

推荐答案

首先，您不需要关闭并打开每三个项目的行标签.如果您留下这样的代码:

First of all, you don't need to close and open row tag each 3 items. If you leave the code like this:

<div class="row">
 <?php
        foreach ($rows as $row){
        ?>  
                <div class="col-md-<?php echo $bootstrapColWidth; ?>">
                    <div class="thumbnail">
                        <img src="user_file/<?php echo $row->foto; ?>">
                    </div>
                </div>
        <?php
        }
        ?>
</div>

您将获得相同的效果，但是没有 row 标签所涉及的分离.请注意，涉及"col-md-4"的行已经更改，以免产生错误的col大小用法.

you will get the same effect, but without the separation that a row tag involves. Notice that the line involving "col-md-4" has already changes in order to not create wrong col size usage.

这篇关于PHP Bootstrap行循环每3个帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！