固定的Bootstrap导航栏消失与768 x 1024视图 [英] Fixed Bootstrap navbar disappearing with 768 x 1024 view

问题描述

我下载了bootstrap AZY响应式1页面模板，无法使固定导航栏保持在屏幕顶部768 x 1024（iPad - 纵向）分辨率。

I downloaded the bootstrap AZY responsive 1 page template and cannot get the fixed navbar to stay at the top of the screen for 768 x 1024 (iPad - Portrait) resolution. It remains fixed at the top for all others from 240 x 320 to 1024 x 768.

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

I've created a fiddle: http://jsfiddle.net/B2sw6/

我试过使用它，但它didn' t work：

I tried using this but it didn't work:

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

如果将中央分隔条拖到768像素的宽度，你会看到黑色的导航条与页面的其余部分一起滚动，而不是保留在顶部的位置。

If you drag the center divider bar across to approx. 768px width you will see the black navbar scrolls up with the rest of the page instead of remaining in place at the top.

有没有人如何更新CSS来改正这个问题？

Does anyone have any hints on how to update the CSS to correct this?

推荐答案

你只需要做一个小的修复。

You only have to do only a small fix. Add position:fixed; to the .navbar-fixed-top in mediaqueries up to 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;
  }
}

祝你好运。

这篇关于固定的Bootstrap导航栏消失与768 x 1024视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！