enriqg9 enriqg9 - 1 year ago 44
CSS Question

More than 12 cols per row in bootstrap

I am going over the 12 columns per row in bootstrap 3.2.0, and according to bootstrap and this post this is totally OK.


If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.


The problem I have is that when I use 4
col-md-4
I get the 4th column to the right like the picture below.

<div class="row">
<div class="col-md-4">
<a href="#" title="Test">
<img width="225" height="150" src="blog.jpg />
</a>

<h4>
<a href="#" title="Test">Test</a>
</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, sodales nec commodo at, viverra eget eros. In hac habitasse platea dictumst. Sed semper […]</p><!-- EXCERPT -->

<p><a href="#" title="Read More">Read More</a></p>
</div>
<div class="col-md-4">
//Loop Repeats
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>


Boostrap with 4 Col-md-4

If I add a 5th or even 6th one, everything floats to the left nicely like in the image below.

<div class="row">
<div class="col-md-4">
//Loop Repeats
</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>


Boostrap with 5 Col-md-4

I am generating this content through a wordpress loop in a custom shortcode, and I noticed that somehow if I remove this line in the Shortcode function the columns float just fine as in this jsFiddle:

$output .= '<p>' . get_the_excerpt() . '</p>';


Any Ideas?

-------- UPDATE

This is the function that generates the shortcode on my dev site:

if ( ! function_exists('woori_posts_shortcode') ) {
function woori_posts_shortcode( $atts ){

$atts = shortcode_atts( array(
'limit' => 6,
'order' => 'DESC',
'orderby' => 'date'
), $atts );

$args = array(
'post_type' => 'post',
'posts_per_page' => $atts["limit"],
'order' => $atts["order"],
'orderby' => $atts["orderby"]
);

$query = new WP_Query($args);

if($query->have_posts()) : $output;

$output .= '<div class="row">';

while ($query->have_posts()) : $query->the_post();

$output .= '<article id="post-' . get_the_ID() . '" class="col-md-4 blog-post ' . implode(' ', get_post_class()) . '">';

$output .= '<a href="' . get_permalink() . '" title="' . the_title('','',false) . '">';

if ( has_post_thumbnail() ) {

$output .= get_the_post_thumbnail( get_the_id(), 'featured', array('class' => 'img-responsive aligncenter thumbnail'));

} else {

$output .= '<img class="img-responsive aligncenter thumbnail" src="' . get_template_directory_uri() . '/images/not-available.png" alt="Not Available" height="150" width="225" />';

}

$output .= '</a>';

$output .= '<h4 class="post-title"><a href="' . get_permalink() . '" title="' . the_title('','',false) . '">' . the_title('','',false) . '</a></h4>';

$output .= '<p>' . get_the_excerpt() . '</p>';

$output .= '<p class="post-permalink"><a href="' . get_permalink() . '" title="Read More">Read More</a></p>';

$output .= '</article>';

endwhile;

$output .= '</div>';

else:

$output = '<p>Sorry, there are no posts to display</p>';

endif;

wp_reset_postdata();

return $output;
}
}

add_shortcode('woori_posts', 'woori_posts_shortcode');


On the site I created a second shortcode which is the exact same function just
get_the_excerpt
commented in PHP, which is the second round of posts that appear there (floated correctly).

Answer Source

The image is giving you the answer.

See, Bootstrap floats the columns to the left, just as you say. The float model means that the element will be floated to the left blocking the flow of the next element. Thus, in your first picture, see how your second column, first row is slightly longer and probably has some margin and padding which is blocking the flow of the element in that following row. In the second picture you don't see it because the long element is at the side. And the best description of a symptom was given by yourself:

I am generating this content through a wordpress loop in a custom shortcode, and I noticed that somehow if I remove this line in the Shortcode function the columns float just fine as in this jsFiddle:

$output .= '<p>' . get_the_excerpt() . '</p>';

There you have. The excerpt is somehow 'randomish' in the length of the containing block, so your problem is something that happens almost every single day to any WP developer. There are many different ways to solve it, but the easiest one is this:

.col-md-4{min-height:400px /* test the height you need to enable normal flow of the floats */}

And voilá, problem solved!