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;
    }
}

vs一些外部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;
    }
  }

twitter-bootstrap响应式菜单中的毛病行为

2 个答案: