css - twitter-bootstrap 响应式菜单中的故障行为

Question

我试图让 tb 网站上的一个示例的菜单栏始终保持恒定的高度，但我遇到了一些奇怪的行为。

在以下演示中:

http://twitter.github.com/bootstrap/examples/fluid.html

如果您将浏览器的宽度调整为大约 1070/1080 像素，该栏会跳到一个丑陋的高度，然后又下降。就好像响应式 CSS 中的某个位置有一个媒体查询，该查询未占浏览器宽度的 ~2px 范围。我将此作为我的应用程序的基准，并且非常感谢有关如何解决此问题的任何建议。

Answer 1

问题来自于某些页面特定样式(来自fluid.html):

@media (max-width: 980px) {
    .navbar-text.pull-right {
        float: none;
        padding-left: 5px;
        padding-right: 5px;
    }
}

与一些外部CSS(来自bootstrap-responsive.css):

@media (max-width: 979px) {
    .nav-collapse .nav {
        float: none;
        margin: 0 0 10px;
    }
}

如您所见，这些媒体查询之间存在 1px 的差异。如果您要编辑第一个也使用 979px，事情就不会再跳了。