it-swarm.com.de

Benutzerdefinierte Post-Loop wird im Spaltenraster von Bootstrap 3 angezeigt

Ich versuche, meine benutzerdefinierte Post-Schleife im dreispaltigen Bootstrap-Raster anzuzeigen. Im Moment sind sie vertikal übereinander gestapelt.

Ich weiß, ich muss etwas Einfaches vermissen - habe mir andere Fragen dazu angesehen und der Code ist völlig anders als meiner - ich habe einfach alles so ausgearbeitet. Es funktioniert super, außer dem Layout.

Hier ist mein 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(); ?>
1
Tracy

Sie müssen Ihren Code wie folgt ändern:

 <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