twitter - Twitter bootstrap 响应式导航在打开和关闭后消失

Question

Twitter Bootstrap 响应式导航存在问题。解释这一点的最好方法是分步进行。

去： http: //library.buffalo.edu/redesign/html/findlibrarymaterials/

将设计大小调整到 768px 以下

通过右上角的按钮打开导航，然后将其关闭

现在将设计大小调整到 768px 以上

由于某种原因，在您扩大设计后导航会消失。刷新后又出现了。我确定这是我对 CSS 所做的事情，但我似乎无法弄清楚是什么。

任何帮助，将不胜感激。谢谢

Answer 1

应用 'collapse' 类时，您的导航栏将被隐藏 - 即使删除了 'in' 类。尝试添加（或取消删除）这个：

.nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
}

Answer 2

我非常希望 eterps 的回答能解决我的问题，因为我的问题与问题中描述的完全相同。但是，由于某种原因，eterps 的回答对我不起作用。

在 Chrome 的 Inspect Element 工具上检查我的导航栏元素后，我发现我的导航栏具有以下属性：

display: none;

对我来说，这就是修复它的原因：

.nav-collapse.collapse {
    display: block !important;
}

无需进行媒体查询。

Answer 3

作为 etaps，但使用媒体查询，因此当宽度 < $navbarCollapseWidth 时规则不适用：

@media (min-width: $navbarCollapseWidth + 1) {
  .nav-collapse.collapse {
      height: auto !important;
      overflow: visible !important;
  }
}

我将 scss 与 Compass 一起使用，您可能需要使用 Less 语法。