title: Bootstrap 3: nested row has 0 height
body: <p>My markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;&lt;/div&gt;    
      &lt;div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"&gt;
        &lt;div class="row"&gt; &lt;!-- this has 0 height --&gt;
          &lt;div class="col-xs-6"&gt;&lt;/div&gt;
          &lt;div class="col-xs-6"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
      &lt;div class="col-xs-12"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What can be the reason that the nested row has correct width, 0 height and can't have a <code>margin-bottom</code>, no matter what contain its colums?</p>
  
  <p>Interesting thing, when I positioned absolutely a pseudoelement <code>::after</code> for this row, it resolves correctly sizes like <code>top: 50%</code> but only if the problematic row has <code>position: static</code> and not when it has <code>position: relative</code>.</p>