html - 我的导航栏有什么问题?

标签 html css twitter-bootstrap

我正在使用 Bootstrap ,当我向下滚动时,我的导航栏就消失了。 (尽管它跟进了一点。将它放在我的测试站点上比发布屏幕截图更容易。http://dev.melmsie.com/

如果您需要此处的代码而不是检查站点,请告诉我。

奖励:另外,为什么我的主图(野花)在右边少了一点? (我看到白色)

编辑:忽略站点的其余部分,它只完成了 ~50%

<body>
  <div class="container-fluid">
    <div class="main-section">
      <nav class=" navbar navbar-default">
          <div class="container-fluid col-md-12 col-xs-12">
            <div class="headers-bfg">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">BFG</a>
                </div>
                <div class="navbar-header">
                 <a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
                </div>
            </div>
            <ul class=" nav navbar-nav ">
              <li><a href="#">Balloons</a></li>
              <li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
              <li><a href="#">Flowers</a></li>
              <li><i class="fa fa-circle" aria-hidden="true"></i></li>
              <li><a href="#">Gifts</a></li>
              <li><i class="fa fa-circle" aria-hidden="true"></i></li>
              <li><a href="#">Hours</a></li>
            </ul>
          </div>
      </nav>



.navbar {
position: fixed;
width: 100%;
}

.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;

最佳答案

您只需为此规则 CSS 添加 z-index。

.navbar {
  z-index: 9000000;
}

如果您想了解有关 z-index 的更多详细信息,请参阅此文档 w3schools .

关于html - 我的导航栏有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40773599/

相关文章:

javascript - 我怎样才能设置这样的背景图像?

jquery - 动画 gif 不是动画

javascript - 防止页面刷新时显示模型窗口

css - 水平对齐 bootstrap div 的最佳方法是什么?

javascript - 当表单有效时 HTML/Bootstrap 验证显示无效

javascript - 如何使用 "fixed" header 使 anchor 标记直接指向页面上的正确位置?

javascript - CSS:将 Three.js 放在圆形 div 中?

html - 尝试在每种类型的浏览器中将页面居中——在大多数情况下都有效,但在其他浏览器中无效

javascript - 如何将 div 定位在父 td 的底部?

css - 我的 div 中的背景颜色未显示