固定Bootstrap导航栏以768 x 1024视图消失

Question

我下载了自举AZY响应式1页模板，无法让固定的导航栏保持在屏幕顶部768 x 1024（iPad - 人像）分辨率。对于所有其他人，它仍然固定在顶部，从240 x 320到1024 x 768。

我创造了一个小提琴：http://jsfiddle.net/B2sw6/

我尝试过使用它，但它不起作用：

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
}

如果将中央分隔条拖到约。 768px宽度您将看到黑色导航栏与页面的其余部分向上滚动而不是保留在顶部的位置。

有没有人有关于如何更新CSS以纠正此问题的任何提示？

Answer 1

你只需做一个小修复。将position:fixed;添加到媒体查询中的.navbar-fixed-top，最高可达979px。

更改

@media (max-width: 979px){
  .navbar-fixed-top {
  margin-bottom: 0px;
  }
}

与

@media screen and (max-width: 979px){
  .navbar-fixed-top {
    margin-bottom: 0px;
    position: fixed;
  }
}

祝你好运。

Answer 2

css中有一个媒体查询：

@media (max-width: 979px)
.navbar-fixed-top, .navbar-fixed-bottom {
position: static;
}

将其更改为

position: fixed

它应该有效！