Question

我真的需要一些帮助。我正在将我的网站从纯HTML转换为WordPress。但是我注意到一个很大的问题，在静态网站上我有一个带有3个cols的ROW，效果很好。在Wordpress中，我注意到ROW没有制作新的ROW，只是继续在第3列附近添加新的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的数量

添加条件$ 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（col-xs-6）的2列问题。

查看引导文档：http://getbootstrap.com/css/#grid-responsive-resets

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

请参阅以下示例：

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

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

3 个答案: