CODEWITHSUNDEEP
csstwitter-bootstrap-3
tom84
tom84

Reputation: 401

Use Bootstrap col-md-4 grid, but it breaks

i want to use 3 colums (col-md-4) nested in a col-md-9. For that i use the following code:

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

But in some line the 3 colums of col-md-4 break. Why? For example on this page:

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

Upvotes: 0

Views: 341

Answers (2)

brooksrelyt
brooksrelyt

Reputation: 4025

You can add a <div class="row"> to wrap your 3 col-md-4 divs inside <div class="col-md-9">. This will reduce some padding so that there is no line break:

Example (need to test it on your end):

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

Upvotes: 1

gerwin
gerwin

Reputation: 909

Looking at the site it seems it is caused by the fact that all your columns have a different height. Try adding height: 800px and you'll see it now works. Also looks better ;)

To make this look even nicer, make sure to cut off the text beyond a certain length and you can reduce the height somewhat.

Upvotes: 2

Related Questions