Используйте сетку Bootstrap col-md-4, но она ломается

Question

Я хочу использовать 3 столбца (col-md-4), вложенных в col-md-9.Для этого я использую следующий код:

<?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>

Но в какой-то строке 3 столбца col-md-4 разбиваются.Зачем?Например на этой странице:

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

Answer 1

Глядя на сайт, кажется, это связано с тем, что все ваши столбцы имеют разную высоту. Попробуйте добавить height: 800px, и вы увидите, что теперь это работает. Также выглядит лучше;)

Чтобы это выглядело еще приятнее, обязательно обрежьте текст, превышающий определенную длину, и вы можете немного уменьшить высоту.

Answer 2

Вы можете добавить <div class="row">, чтобы обернуть ваши 3 col-md-4 деления внутри <div class="col-md-9">.Это уменьшит некоторые отступы, так что не будет переноса строки:

Пример (необходимо проверить его на своем конце):

<?php if (have_posts()){ ?>
    <section class="container container-fluid">  
      <div class="row" id="ajaxPostContainer">
        <div class="col-md-9">
            <div class="row">
                <?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>
        <div class="col-md-3">
            <div class="sidebar">
                <?php dynamic_sidebar("single-post"); ?>
            </div><!-- sidebar --> 
        </div>  

    </div>
</div>