web-dev-qa-db-fra.com

Configuration de la boucle de post personnalisée à afficher dans la grille de colonnes Bootstrap 3

J'essaie d'obtenir ma boucle de publication personnalisée à afficher dans la grille d'amorçage à 3 colonnes. En ce moment, ils sont empilés les uns sur les autres verticalement.

Je sais que je dois manquer quelque chose de simple - j'ai examiné d'autres questions à ce sujet et le code est totalement différent du mien - je viens de travailler comme ça. Cela fonctionne très bien, sauf la mise en page.

Voici mon code:

    <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

Vous devez changer votre code comme suit:

 <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