如何使用bootstrap / wordpress将每个3列包装成一行?

时间:2017-11-15 11:46:26

标签: wordpress twitter-bootstrap row

我想使用此循环将每个3列包装成一行。 我知道我必须使用柜台,但我不知道在哪里打开/关闭行。

这是我的代码:

<div id="blog" class="sezione">
<section id="content" class="container">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); 
     if (!is_paged() && $wp_query->current_post === 0 ) { ?>
        <div class="col-md-7 col-sm-12">
            ...
        </div>
    <?php
    } elseif (!is_paged() &&  $wp_query->current_post >= 1 && $wp_query->current_post <= 2 ) { ?>
        <div class="col-md-5 col-sm-6">
            ...
        </div>
    <?php 
    } elseif (!is_paged() &&  $wp_query->current_post >= 3 ) { ?>
        <div class="col-md-4 col-sm-6">
            ...
        </div>
    <?php 
    } elseif ( is_paged() ) { ?>
        <div class="col-md-4 col-sm-6">
            ...
        </div>
    <?php }
    endwhile;
        // Restore original post data.
        wp_reset_postdata();
    endif; ?>
    <div>
        <?php posts_nav_link('|', '...'); ?>
    </div>
</section>
</div><!-- /sezione -->

1 个答案:

答案 0 :(得分:0)

<?php
//set up counter
$count = 1;
?>

<div id="blog" class="sezione">
<section id="content" class="container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); 

// if count is equal to 1 start a row
if ($count === 1){
    echo '<div class="row">';
}

if (!is_paged() && $wp_query->current_post === 0 ) { ?>
    <div class="col-md-7 col-sm-12">
        ...
    </div>
<?php
} elseif (!is_paged() &&  $wp_query->current_post >= 1 && $wp_query->current_post <= 2 ) { ?>
    <div class="col-md-5 col-sm-6">
        ...
    </div>
<?php 
} elseif (!is_paged() &&  $wp_query->current_post >= 3 ) { ?>
    <div class="col-md-4 col-sm-6">
        ...
    </div>
<?php 
} elseif ( is_paged() ) { ?>
    <div class="col-md-4 col-sm-6">
        ...
    </div>
<?php }

    // if count is equal 3 close row and reset $count
    // or else increment
    if ($count === 3){
        echo '</div>';
        $count = 1;
    }else{
        //increment counter
        $count++;
    }

endwhile;
    // Restore original post data.
    wp_reset_postdata();

endif; ?>
<div>
    <?php posts_nav_link('|', '...'); ?>
</div>