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

Question

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

在以下演示中：

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

如果您将浏览器的大小调整为大约 1070/1080 px 宽度，则该栏会跳到一个难看的高度，然后又向下。就好像在响应式 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，事情就不会再跳跃了。

Answer 2

.navbar-text.pull-right在去{float: none}之前.nav-collapse去那里有一个地方去{height: 0}。我会去找那个。

更新：它在页面样式中：

  @media (max-width: 980px) {
    /* Enable use of floated navbar text */
    .navbar-text.pull-right {
      float: none;
      padding-left: 5px;
      padding-right: 5px;
    }
  }