我的导航栏有什么问题？答案

【问题标题】：Whats wrong with my navbar?我的导航栏有什么问题？
【发布时间】：2017-04-08 00:02:43
【问题描述】：

我正在使用引导程序，当我向下滚动时，我的导航栏就消失了。（尽管它遵循了一点。将它放在我的测试站点上比发布屏幕截图更容易。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;

【问题讨论】：

如果可以的话，最好只添加导航栏的代码。
@the_grits 完成

标签： html css twitter-bootstrap

【解决方案1】：

对于导航栏，它看起来非常好。它不会对我或任何东西消失。通过图像，我能够确定它的位置。如果你去你的“/css/bfg.css”找到.main-section，他就是你有背景图片的地方，你已经按照自己的喜好设置了，太好了！您需要做的就是编辑.main-section 图像http://dev.melmsie.com/img/back.jpg 的宽度。为方便起见，将宽度增加 10%，这样您就不必继续编辑宽度，因为它是您缺少的一个小区域。

仅从您未完成的网站的外观来看，这太棒了！
J.卡特:)

【讨论】：

【解决方案2】：

只需添加 z-index。你需要把它添加到 .navbar 类中，看看代码。

.navbar {
    position: fixed;
    width: 100%;
    z-index: 9999;
}

至于图片，如果您想在将图片放入容器时显示完整图片。您正在使用现在应该喜欢的全宽图像。

【讨论】：

【解决方案3】：

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

.navbar {
  z-index: 9000000;
}

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

【讨论】：

是的，如果您不打算使用任何模式或其他任何东西，那么这很好，较低的 z-index 很好。请记住，它确实应该设置得足够高，以始终保持在其他元素之上。
我同意你的观点，因为如果它有模态或其他东西，他必须在z-index中下订单

【解决方案4】：

我了解您希望将导航栏设置在顶部，并且即使向下滚动用户也始终可以看到导航栏，对吧？

你试过吗？

<nav class="navbar navbar-default navbar-fixed-top">

你可以看到full explanation right here

希望对你有所帮助。如果没有，请告知。

【讨论】：

【解决方案5】：

如果您只想覆盖该行为，可以将 z-index 添加到以下 css 到 .nabar

.navbar {
    position: fixed;
    width: 100%;
    z-index: 1;
}

【讨论】：