如何使用PHP在3个COLS之后在Bootstrap 3中创建新的ROW？

Question

我真的需要一些帮助。 我正在将我的网站从纯HTML转换为WordPress。 但是我注意到一个大问题，在静态网站上我有一个带有3个列的ROW，它的工作原理很好。 在Wordpress中，我注意到ROW并没有创建新的ROW，只是继续在第3个col旁边添加新的col。

我该如何用循环之类的东西解决这个问题？

我的代码：

           <?php $query = new WP_Query(array('post_type' => 'wpa_diensten',  'posts_per_page' => -1));  ?>

            <?php if($query->have_posts()): global $more;  ?>
            <?php while($query->have_posts()): $query->the_post(); $more = 0; ?>

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
                        <span class="wpa-service-bim-image"></span>
                            <h1><?php the_title(); ?></h1>

                            <?php if ( has_post_thumbnail($post->ID) ): ?>
                                <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
                            <?php endif; ?>                               

                            <?php the_content(); ?>

                            <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
            </div><!-- end: col -->

            <?php endwhile; ?>
        <?php endif; ?>
        </div>
    </div>
</div>

Answer 1

在您的while循环外添加一个初始值为零的$ count变量

然后在每个循环之后的while循环内将$ count加1

如果条件$ count％3 == 0则添加

如果为true，则创建新行

否则做新的col

$count=0
while($query->have_posts()): $query->the_post(); $more = 0;
$count+=1;
if($count%3==0){
//make new row
}
else{
//make new col
}

Answer 2

您也可以使用引导响应列重置，而不是为每3列创建新行。 然后，您在使用xs的2列（col-xs-6）时遇到了麻烦。

请查看引导程序文档： http : //getbootstrap.com/css/#grid-sensitive-resets

在您的情况下，可以在每2列之后添加一次sm重置，并在每3列之后添加md和lg重置。

请参阅以下示例：

<?php $query = new WP_Query(
    array(
        'post_type' => 'wpa_diensten',  
        'posts_per_page' => -1
    )
); ?>

<?php $i = 1; // set a counter before the loop ?>

<?php if($query->have_posts()): global $more;  ?>

    <div class="row">

    <?php while($query->have_posts()): $query->the_post(); $more = 0; ?>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
            <span class="wpa-service-bim-image"></span>
            <h1><?php the_title(); ?></h1>

            <?php if ( has_post_thumbnail($post->ID) ): ?>
                <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
            <?php endif; ?>                               

            <?php the_content(); ?>

            <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>

        </div><!-- end: col -->

        <?php if ( $i%2 == 0 ){ echo '<div class="clearfix visible-sm-block">'; } // show clearfix after each 2 cols for xs ?>
        <?php if ( $i%3 == 0 ){ echo '<div class="clearfix visible-lg-block visible-md-block">'; } // show clearfix after each 3 cols for lg and md ?>

    <?php endwhile; ?>

    </div><!-- end: row -->

<?php endif; ?>

Answer 3

我认为这就是您的代码的外观。 您可能需要调整数字...我认为数学是正确的！ 如果我们所在的循环是3的倍数，则所有这些操作都会在适当的位置回显开和关div。

<?php $i = 1; # start a loop counter at 1 ?>
<?php if($query->have_posts()): global $more;  ?>
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>

<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row opening div?>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
            <span class="wpa-service-bim-image"></span>
                <h1><?php the_title(); ?></h1>

                <?php if ( has_post_thumbnail($post->ID) ): ?>
                    <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
                <?php endif; ?>                               

                <?php the_content(); ?>

                <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
</div><!-- end: col -->

<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row closing div ?>

<?php $i++;
<?php endwhile; ?>