Over 12 columns per row in bootstrap

Question

I go over 12 columns per line in bootstrap 3.2.0, and according to bootstrap this post is completely normal.

If more than 12 columns are placed in one row, each group of additional columns will, like one block, turn into a new row.

The problem is that when I use 4 col-md-4 , I get the 4th column to the right, as shown in the figure 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> 

If I add a fifth or even a sixth, everything will move smoothly to the left, as 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> 

Any ideas?

Answer 1

The image gives you the answer.

See Bootstrap floats the columns to the left as you say. The float model means that the element will move to the left, blocking the flow of the next element. So, in your first picture, see how your second column is, the first row is a little longer and probably has some margin and indentation that blocks the flow of the element in this next row. In the second image you do not see this because the long element is on the side. And the best description of the symptom was given by itself:

I am generating this content through a wordpress loop in a custom shortcode, and I noticed that somehow, if I delete this row in the Short Code function, the column floats exactly the same as in this jsFiddle:

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

There you have it. Exposure is somehow "random" in the length of the containing block, so your problem is what happens almost every day with any WP developer. There are many ways to solve this problem, but the simplest one is:

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

And will, the problem is solved!

Answer 2

The packaging problem is due to the fact that the contents of your columns are of different heights, which causes “gaps” in the grid. You can iterate and use the clearfix DIV in each column of X, or you can only use it for the CSS solution .

http://codeply.com/go/BGSOAQi72l

 @media (min-width: 992px) { .row > .col-md-4:nth-child(3n+1) { clear: left; } } 

992px has been used since the md breakpoint begins. Learn more about when to use the Bootstrap String Class .

Read more: bootstrap row with columns of different heights

Answer 3

Another way to solve this problem:

 <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="clearfix custom-class"> <!-- Before the loop starts again --> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> 

Then add CSS so that it only appears starting with the average screen size

 .custom-class { display: none; } @media (min-width: @screen-md) { .custom-class { display: block; } } 

Thus, there is no need to predetermine the minimum block height and work perfectly