Bootstrap 3 nesting columns, nested row height - css

Question

Why nested .row takes height of parent .row?
Example:
<div class="container">
<div class="row"> <!-- Parent .row -->
<div class="col-md-8">
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="row"> <!-- nested PROBLEMATIC ROW -->
<div class="col-md-12">
Why this row has height of 300px instead of 150px?
I can solve problem by setting 'clear: both' on that
row, but class .row should do it by itself.
</div>
</div>
</div>
<div class="col-md-4">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
With some dummy css:
.col-md-8 {
height: 500px;
background: #f0f0f0;
}
.col-md-6 {
height: 150px;
background: red;
}
.col-md-3 {
height: 150px;
background: blue;
}
.col-md-12 {
height: 150px;
background: yellow;
}
.col-md-4 {
height: 500px;
background #f0f0f0;
}
.col-md-4 > div {
margin-bottom: 10px;
height: 150px;
background: green;
}
Final output:
JS Bin : http://jsbin.com/nugoziju/1/edit

Answer 1

To begin with, you shouldn't be putting 'col's inside 'col's in Bootstrap without the corresponding row. So your markup looks like this:
<div class="container">
<div class="row"> <!-- Parent .row -->
<div class="col-md-8">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row"> <!-- nested PROBLEMATIC ROW -->
<div class="col-md-12">
Why this row has height of 300px instead of 150px?
I can solve problem by setting 'clear: both' on that
row, but class .row should do it by itself.
</div>
</div>
</div>
<div class="col-md-4">
<div></div>
<div></div>
<div></div>
</div>
</div>
And then that's fixed. That row is 150px tall.
Updated jsbin: http://jsbin.com/nugoziju/7