css - 修复了 Bootstrap 导航栏在 768 x 1024 View 下消失的问题

Question

我下载了 bootstrap AZY 响应式 1 页面模板，但无法让固定导航栏停留在 768 x 1024(iPad - 纵向)分辨率的屏幕顶部。对于 240 x 320 到 1024 x 768 的所有其他分辨率，它保持固定在顶部。

我创建了一个 fiddle :http://jsfiddle.net/B2sw6/

我试过用这个但是没用:

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

如果您将中心分隔条拖动到大约。 768px 宽度，你会看到黑色导航栏随着页面的其余部分向上滚动，而不是留在顶部。

有没有人对如何更新 CSS 来纠正这个问题有任何提示？

Answer 1

您只需要做一个小的修复。将 position:fixed; 添加到 979px 的媒体查询中的 .navbar-fixed-top。

改变

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

与

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

祝你好运。