title: Column collapse at 768px, menu collapses at 767px?
body: <p>My website uses <a href="/questions/tagged/twitter-bootstrap-3" class="post-tag" title="show questions tagged &#39;twitter-bootstrap-3&#39;" rel="tag">twitter-bootstrap-3</a> and has a 2 column layout (<code>col-sm-9</code> and <code>col-sm-3</code>).</p>
  
  <p><code>col-sm-9</code> contains my blog and <code>col-sm-3</code> contains a sidebar nav.</p>
  
  <p>For some strange reason the nav bar collapses at <code>767px</code>, while the blog container collapses at <code>768px</code>.</p>
  
  <p>This means when I have the viewport at exactly <code>768px</code>, the menu looks terrible. </p>
  
  <p>Is this a bug of some sort and can someone help me resolve this?</p>
  
  <pre><code>&lt;div class="col-sm-9 tutorial-panel"&gt;
    &lt;section&gt;
      This is my blog content 
    &lt;/section&gt;
  
    &lt;nav class="col-sm-3 navbar-default"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" 
            data-toggle="collapse" data-target="#example-navbar-collapse"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="example-navbar-collapse"&gt;
        &lt;ul class="clearfix"&gt;
          &lt;li&gt;item 1&lt;/li&gt;
          &lt;li&gt;item 2&lt;/li&gt;
          &lt;li&gt;item 3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>