Question

我卡住了，无法让这个循环进入bootstrap行以获得3列产品。

<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">

<ul class="products">
    <?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12
            );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();
                wc_get_template_part( 'content', 'product' );
            endwhile;
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->

</div>
</div>  <!--fecha row -->
</div> <!--fecha container-->

为了输出3列，我在这里缺少什么？

Answer 1

我建议通过CSS为各种设备处理产品显示，而不是使用Bootstrap的网格系统。

如果您坚持使用网格系统，那么您可以在此处查看现有解决方案：https://github.com/bassjobsen/woocommerce-twitterbootstrap

或者您可以使用现有代码尝试这样的事情：

<div class="products row">
    <?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12
            );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();
                wc_get_template_part( 'content', 'product' ); // todo: you'll need to swap the `<li>` element to `<div>` instead on this template and add the Bootstrap `col-*` classes
            endwhile;
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
</div><!--/.products-->

Woocommerce产品循环与引导行

1 个答案: