Twitter Bootstrap：更改了导航栏折叠阈值，下拉菜单的副作用答案

【问题标题】：Twitter Bootstrap: changed navbar collapse threshold, side-effect on drop-downsTwitter Bootstrap：更改了导航栏折叠阈值，下拉菜单的副作用
【发布时间】：2012-09-23 17:44:20
【问题描述】：

我正在使用Twitter Bootstrap 2.1.1，并在Twitter Bootstrap Github page 上使用类似于此示例的导航栏折叠和导航栏下拉菜单

我知道它在 979 像素处折叠并在 980 像素处展开，我根据接受的答案将其更改为在 779 像素处折叠：

How to change navbar collapse threshold using Twitter bootstrap-responsive?

我修改了bootstrap.responsive.css

@media (max-width: 979px) {...}

到

@media (max-width: 779px) {...}

效果很好，我看到导航栏现在在 779 像素处折叠并在 780 像素处展开。

但是，我看到了副作用。

当我将浏览器的宽度调整为介于 780 像素和 979 像素之间（导航栏不再折叠的范围）并单击下拉菜单时，它不会呈现下拉选项。如果我将大小调整为 980 像素或更宽，那么我会看到下拉选项。

我正在使用 Firefox Firesizer，所以我可以查看宽度。事实上，如果我单击一个下拉菜单然后拖动窗口大小，我可以看到它在 980 像素处绘制下拉选项，然后当我低于 979 像素时它们会消失。

以前有人遇到过这种情况吗？

我怀疑在更改导航栏折叠阈值时需要更改下拉菜单（或其相关类）的其他媒体查询。但是，我还没有找到解决方案。我将非常感谢任何帮助、见解或建议。谢谢！

【问题讨论】：

标签： css twitter-bootstrap media-queries

【解决方案1】：

晚会，但为了后代：

调整导航栏大小时，您需要调整/覆盖bootstrap-responsive.css 文件中的两项。

@media (max-width: 979px) => @media (max-width: 1120px)

与：

@media (max-width: 780px) => @media (max-width: 1121px)

（1120px是导航栏折叠的阈值）

查看更多：https://gist.github.com/4269590

【讨论】：