css - 使用 Bootstrap col-md-4 网格，但它会中断

Question

我想使用嵌套在 col-md-9 中的 3 列 (col-md-4)。为此，我使用以下代码:

<?php if (have_posts()){ ?>
<section class="container container-fluid">  
      <div class="row" id="ajaxPostContainer">
        <div class="col-md-9">

        <?php
        ini_set("display_errors", 1);

        while (have_posts()){
            the_post();
        $post_uri           = get_permalink();
        $post_image         = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );

        $content            = get_the_content();
        $content            = preg_replace('/<a href=\"(.*?)\">(.*?)<\/a>/', "\\2", $content);            
    ?>

     <div class="col-md-4" data-categories="" style="" >
        <a href="<?=$post_uri?>" title="">

                <?php if($post_image !== false){ ?>
                 <article>
                <img src="<?=$post_image?>" class="img-responsive" style="width: 100%;" />
                <?php } ?>
                <h3><?=the_title('', '', false)?></h3>
                <div class="entry">
                <p><?=$content?></p>

        </article>
        <hr />
        </a>
        </div>   




    <?php } ?>
    </div>
    <div class="col-md-3">
        <div class="sidebar">
            <?php dynamic_sidebar("single-post"); ?>
        </div><!-- sidebar --> 
    </div>  

</div></div>

但在某些行中，col-md-4 的 3 列中断了。为什么？例如在这个页面上:

https://www.immvestwolf.de/blog/eigentumswohnungen-leipzig

Answer 1

查看站点似乎是由于所有列的高度不同所致。尝试添加 height: 800px，您会发现它现在可以工作了。看起来也更好 ;)

为了使它看起来更好，请确保将文本剪掉超过一定长度，并且可以稍微降低高度。