Last element in a row is not aligning - html

Question

I am using bootsrap 3 as my CSS framework to style my website.
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
.
.
.
</div>
The idea is to add the col-lg-4 div into one row, and the col-lg-4 div will automatically move to the next row when it has exceed the width of the row.
In general, it works fine. However, the last col-lg-4 div of the first row is not aligning correctly. The demo address is: http://imaboy.cn/blog/forums/
Do you have any idea why this is happening?
Here is the screenshot:
http://www.imaboy.cn/screenshot.jpg

Answer 1

very easy. In your first column, last row, you have a col-lg-4 element which has an additional row of text, making it higher. This causes to interrupt the normal float of columns. See images below:
as you may see, that beige zone is about to collide with the column in the left. See image below for a better view of the issue:
I have added a transparency so you can see the collision and how that rocket column blocks all floats.
The solution
just add this to your CSS:
.col-md-6.col-xs-6.col-sm-6.col-lg-4{min-height:70px; margin-top:20px; }
Now you make sure those columns will have the appropriate height to float with ease (adjust that height if needed). Also, I have added the margin-top declaration to your CSS instead of inline since it's better to have it all in the style-sheet. Also, you should consider giving those columns a name, like myCol so you don't risk to affect columns anywhere in your site and you can target them as easy as
.myCol{min-height:70px; margin-top:20px; }