title: Bootstrap affix not keeping the column layout
body: <p>When I scroll down in my browser (chrome), the right column is pushed all the way to the left, my sidebar is pushed to the background, and and all the right-side content is over the left-side sidebar. </p>
  
  <p>This only happens when I apply the affix properties to my sidebar div. </p>
  
  <p>If you notice, under normal situations, the page is rendered without a problem, as you can see below:
  <img src="https://i.stack.imgur.com/cd8Ia.png" alt="enter image description here"></p>
  
  <p>However, when I scroll down, this is how it looks like:
  <img src="https://i.stack.imgur.com/FpwJZ.png" alt="enter image description here"></p>
  
  <p>For your reference, this is how I'm implementing the affix div:</p>
  
  <pre><code>&lt;div class="row content-wrapper"&gt;
      &lt;div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix"&gt;
          &lt;div class="col-lg-3"&gt;
              &lt;!-- Sidebar code --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-9"&gt;
              &lt;!-- content --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's a link to JS fiddle, so that you can see the problem happening live:</p>
  
  <p>Here's a JS fiddle for you to see the error:</p>
  
  <p><a href="http://jsfiddle.net/fH46S/2/" rel="noreferrer">http://jsfiddle.net/fH46S/2/</a></p>
  
  <p>How can I fix this?</p>