html - 引导网格未正确对齐

我使用首页的引导网格系统将我的帖子显示为第一行的1个帖子、第二行的3个帖子、第三行的3个帖子等。我的帖子在col-md-4行中没有对齐有问题。然而，唯一一次出现这个问题是当我有一个比一行长的标题时（下面的例子）。有人知道我该怎么解决吗？
应该是什么样子。。。

当我有一篇文章有一个标题（或摘录）可以连到多行的时候，它看起来是怎样的。。。

如您所见，示例柱12一直向右移动（它应该在左侧），示例柱13和14被移动到下面。我不知道该如何解决这个问题，我真的很感激任何帮助！
我的首页.php

<?php
/*
 * Template Name:
 */

get_header();
get_template_part ('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );

if ( $the_query->have_posts() ) { ?>
    <div id="ajax">
    <?php
    $i = 0;
    while ( $the_query->have_posts() ) { $the_query->the_post();

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
            <div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                </div>
               <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <div class="front-page-post-info">
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
                                 <?php get_template_part( 'share-buttons' ); ?>
                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
            </div>
            </article>
<?php

        } else { // Small posts ?>
            <article <?php post_class( 'col-md-4' ); ?>>
                <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <div class="front-page-post-info">
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
                                 <?php get_template_part( 'share-buttons' ); ?>
                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
            </div>
            </article>
            <?php
        }
        $i++;
    }?>
    </div>
    <?php if(get_query_var('paged') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

最佳答案

确保将列嵌套在行中。
例如：

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

而不是这个：

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

关于html - 引导网格未正确对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42032378/