Twitter Bootstrap导航栏已修复

Question

当屏幕尺寸低于940px时，我必须更改导航栏？我不想让它响应。如果您在940px下调整浏览器窗口大小，您将看到scroolbar-x（底部滚动条）出现，但当您向右滚动时，导航栏位置仍然固定，并且某些菜单不会出现。

也许有些图片会解释我的问题。

Answer 1

仅在CSS中无法完成。

您提供的示例（Twitter）具有固定位置和所有屏幕尺寸固定大小的导航栏。固定位置意味着滚动条不会影响导航栏的位置，这就是为什么你不能使用x滚动条来查看导航栏的一部分，一旦它小于940px宽，就隐藏在“导航栏”之下浏览器窗口的右边框。

所以你必须选择

1. 有一个固定位置，固定大小导航栏，无论用户向下滚动多远，都会出现在顶部，并接受在足够小的屏幕下他们赢了“能够水平滚动以查看全部，或
2. 有固定位置，流体尺寸导航栏，可调整其宽度以适应不同的屏幕尺寸，这有望减少首先水平滚动的需要，尤其是如果你的内容不适合一行，你可以让它垂直增长，或者
3. 有一个非固定位置，固定大小导航栏，它将响应水平滚动，但在用户向下滚动页面时不会出现。

实际上，你不能让position在x方向单向工作而在y方向工作另一条方向。

您可以通过使用CSS检查器编辑Twitter页面中的以下类来了解选项2的含义：

.global-nav .container {
    width: auto;
    max-width: 865px;
}
.global-nav, .global-nav-outer {
    height: auto;
}

第二个选择器实现垂直流动性，一旦内容无法放入一行。

通过进行这些更改，您可以看到选项3的含义：

.topbar {
    position: absolute;
    /* ... the rest as is */
}

---

修改

当然，它无法在CSS中完成并不意味着它根本无法完成。这是一个实现你提到的脚本的jsfiddle。这使用MooTools而不是jQuery，我通常将它用于bootstrap。

小提琴：http://jsfiddle.net/uadDW/4/
全屏版本可以更好地查看效果：http://jsfiddle.net/uadDW/4/show/

（感谢@Sherbrow为我提供了基础小提琴。）

Answer 2

遇到同样的问题并对建议的解决方案感到兴奋，但后来我努力在我自己的代码中实现（是的，noobie）。

事实证明这里与jquery.js存在冲突，我需要在我的代码中的其他位置。

http://jsfiddle.net/uadDW/83/

/* code as before .. only added jquery.js link */

从上面的小提琴中的外部资源中删除jquery.js，您将获得原始的所需行为。大鼠！