title: Why is main content moving over to navbar using Affix?
body: <p>Can't seem to figure out how to use Bootstrap Affix feature.</p>
  
  <p><a href="http://jsfiddle.net/GUbgF/1/" rel="nofollow">http://jsfiddle.net/GUbgF/1/</a></p>
  
  <p>As soon as Affix adds the .affix class to the navbar, the main content block moves over, thus overlaying the navbar.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;class="row-fluid"&gt;
      &lt;div class="span4 bs-docs-sidebar" id="side-bar" data-spy="affix" data-offset-top="100"&gt;
          &lt;ul class="nav nav-list bs-docs-sidenav"&gt;
              &lt;li&gt;&lt;a href="#1"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;  1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#2"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;  2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#3"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;  3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#4"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;  4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#5"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;  5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
     &lt;div class="span8" id="main-bar&gt;
      ...
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.affix {
  position: fixed; 
  top: 20px; 
  left: 0px;
  </code></pre>
  
  <p>}</p>