The_excerpt()在Wordpress上的栅格发帖页

Question

我试图在WordPress上创建一个包含我所有帖子的网格页面。

在我为我的帖子添加the_excerpt();之前，网格运行良好。电网变得乱七八糟。行不再正确了。

这是我在没有the_excerpt();的情况下拥有的：

这就是the_excerpt();所发生的事情：

在这里，我的页面代码-post.php：

<?php /* Template Name: Blog-3 */ ?>

<?php get_header(); ?>

    <div>

    <div class="container">

        <?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

        <div class="row">

        <?php if( have_posts() ): ?>

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

            <div class="col-sm-6" style="margin-bottom: 65px;">

            <p>
                <?php if ( has_post_thumbnail() ) : ?>
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
                <?php endif; ?>
            </p>

            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <p>Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>

            <?php the_excerpt(); ?>

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

            <?php endwhile; ?>

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

    </div><!-- container -->

        <div>
            <span><?php previous_posts_link(__('« Newer','example')) ?></span> <span class="older"><?php next_posts_link(__('Older »','example')) ?></span>
        </div><!-- /.navigation -->

    <?php else: ?>

        <div id="post-404">

            <p><?php _e('None found.','example'); ?></p>

        </div><!-- /#post-404 -->

    <?php endif; wp_reset_query(); ?>

    </div><!-- /#content -->


<?php get_sidebar();
get_footer();?>

Answer 1

值得一提的是，从Bootstrap 4开始，您可以使用Cards列。

你可以在这里查一下。

卡片可以通过在.card-columns中包装成类似砖石的列。

<div class="card-columns">
  <div class="card">...</div>
  <div class="card">...</div>
  ...
</div>