Bootstrap 3: nested row has 0 height

Question

My markup:

<div class="container">
  <div class="row">
    <div class="col-xs-12"></div>    
    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
      <div class="row"> <!-- this has 0 height -->
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
      </div>
    </div>    
    <div class="col-xs-12"></div>
  </div>
</div>

What can be the reason that the nested row has correct width, 0 height and can't have a margin-bottom, no matter what contain its colums?

Interesting thing, when I positioned absolutely a pseudoelement ::after for this row, it resolves correctly sizes like top: 50% but only if the problematic row has position: static and not when it has position: relative.

Answer 1

I reproduced the problem: http://jsfiddle.net/phn3Lae6/1

When you remove position: absolute from ::after pseudoelement, row behaves normally.

Since ::before and ::after pseudoelements are an important part of Bootstrap grid, probably the best solution here is to not mess around with them, but to create a separate element inside the grid element to be a pseudoelement parent, for example like:

<div class="row">
  <div class="pseudoelement-parent">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

.pseudoelement-parent {
  position: relative;
}