web-dev-qa-db-ja.com

カスタムポストループをBootstrap 3列グリッドに表示する

私は私のカスタムポストループを3列のブートストラップグリッドに表示させようとしています。今、それらは縦に積み重ねられています。

私は単純なものを見逃さなければならないことを知っています - これに関する他の質問を見ました、そして、コードは私のものと全く異なっています - 私はちょうどこのようにそれをすべて試しました。それはレイアウトを除いて、素晴らしい作品。

これが私のコードです：

    <section id="services">

    <div class="container">

        <h2></h2>
        <p class="lead"></p>

    <?php query_posts('posts_per_page=3&cat=6&post_type=our_services'); ?>

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="row">


            <div class="col-sm-4">


<?php if ( has_post_thumbnail()) { $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>

    <img src="<?php echo $url; ?>" alt="<?php the_title() ?>">

                <h3><?php the_title() ?></h3>
                <p><?php the_excerpt() ?></p>
                <a href="<?php the_permalink() ?>" class="btn btn-success">Learn more <i class="fa fa-angle-right" aria-hidden="true"></i></a>


            </div><!-- col -->


        </div><!-- row -->

         <?php } ?>

        <?php endwhile; endif; ?>

    </div><!-- container -->
</section><!-- services -->

<?php wp_reset_query(); ?>
postscustomizationtwitter-bootstrap
1
Tracy

次のようにコードを変更する必要があります。

 <section id="services">

    <div class="container">

        <h2></h2>
        <p class="lead"></p>

    <?php query_posts('posts_per_page=3&cat=6&post_type=our_services'); ?>

    <div class="row">

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


            <div class="col-sm-4">


<?php if ( has_post_thumbnail()) { $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>

    <img src="<?php echo $url; ?>" alt="<?php the_title() ?>">

                <h3><?php the_title() ?></h3>
                <p><?php the_excerpt() ?></p>
                <a href="<?php the_permalink() ?>" class="btn btn-success">Learn more <i class="fa fa-angle-right" aria-hidden="true"></i></a>


            </div><!-- col -->

         <?php } ?>

        <?php endwhile; endif; ?>

         </div><!-- row -->

    </div><!-- container -->
</section><!-- services -->

<?php wp_reset_query(); ?>
1
Tarun modi