Twitter bootstrap 3 列在768px折叠，菜单在767px折叠？

我的网站使用并有两列布局（

col-sm-9

和

col-sm-3

）

col-sm-9

包含我的博客，

col-sm-3

包含侧栏导航

出于某种奇怪的原因，导航栏在

767px

处折叠，而博客容器在

768px

处折叠

这意味着当我的视口正好位于

768px

时，菜单看起来很糟糕

这是某种错误吗？有人能帮我解决吗

<div class="col-sm-9 tutorial-panel">
  <section>
    This is my blog content 
  </section>

  <nav class="col-sm-3 navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
          data-toggle="collapse" data-target="#example-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="clearfix">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </div>
  </nav>

这是我的博客内容
切换导航

项目1
项目2
项目3

查看，您不能将

导航栏

放在

.col-*

中，它可能会导致问题

切换导航















提交

是的，这是一个错误，可以解决吗？谢谢您的整个HTML代码在哪里？请尝试在目标元素样式上添加

框大小：边框框

。当不同元素受到不同媒体查询的影响时，可能会发生这种情况，即从两侧接近一个特定断点像素值，一个使用

最大宽度

，另一个使用

最小宽度

。创建一个，以便我们可以检查。