title: Twitter bootstrap 3: Navbar changes width when affix fires
body: <p>Well, I have a curious issue concerning the bootstrap-3 affix script. You can see the problem in this <b><a href="http://jsfiddle.net/F42XP/" rel="noreferrer">fiddle</a></b>. Please maximise the result-frame horizontally and scroll down so that affix gets fired. As you can see, the navbar increases at the right side and I really cannot see any reason for this effect. I temporarily solved the problem by addng</p>
  
  <pre><code> .container
  {
  padding-left: 0px;
  padding-right: 0px;
  }
  </code></pre>
  
  <p>to the css. But, as you can see, it's not very pretty and I don't want to remove these paddings. Alternatively, I can set a static width, like</p>
  
  <pre><code>width: 1140px;
  </code></pre>
  
  <p>in <i>#nav.affix</i>. But this is not very responsive... I realy tried a lot of approaches, but couldn't get any satisfying results. Do you know, what's causing it?</p>
  
  <p><b>Edit</B></p>
  
  <p>Okay, Chrome's debugger gives me further informations: Before affix is fired, the nav-element got the class 'affix-top' amongst others (abstract from chrome-debugger NOT html source!):</p>
  
  <pre><code>&lt;nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow"&gt;
  </code></pre>
  
  <p>Curiously, affix-top isn't declared in the HTML-code. Nevertheless, #nav.nav.navbar.navbar-default-affix-top is sized like: <b>1140px x 52px</b>.</p>
  
  <p><img src="https://i.stack.imgur.com/JGYtk.png" alt="enter image description here"></p>
  
  <p>After scrolling and affix is fired, the class 'affix-top' changes to 'affix' and 'affix' is sized like: <b>1170px x 52px</b>.</p>
  
  <p><img src="https://i.stack.imgur.com/MIvA0.png" alt="enter image description here"></p>
  
  <p>These are the 30px, the navbar grows to the right. But how can i stop it? Above all, I cannot find the class affix-top in any csv-files...</p>