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

Question

我下载了 bootstrap AZY responsive 1 page 模板，并且无法让固定导航栏保持在屏幕顶部以获取 768 x 1024 (iPad - Portrait) 分辨率。对于从 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 来纠正这个问题的提示？

score 1 · Accepted Answer

你只需要做一个小的修复。添加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;
  }
}

祝你好运。

score 0 · Accepted Answer

css中有一个媒体查询：

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

将其更改为

position: fixed

它应该工作！

2 回答 2