Bootstrap 滚动时导航栏不向下移动

Question

我一直在此处和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏：

<nav class="navbar">
  <a href="#About">About me</a>
  <a href="#Education">Education</a>
  <a href="#Portfolio">Portfolio</a>
  <a href="#Contact">Contact</a>
</nav>

我已经尝试过在导航标签内部使用和不使用 div 容器。

这里是对应的CSS:

nav {
  text-align: center;
  position: fixed;
  top: 0;
  lef: 0;
  right: 0;
  height: 35px;
  padding-top: 15px;
  box-shadow: 0px 0px 8px 0px;
  -webkit-box-shadow: 0px 0px 8px 0px;
  -moz-box-shadow: 0px 0px 8px 0px;
  background-color: gray;
  width: 100%;
  z-index: 100;
}

我也试过没有 z-index: 100; 如果有人知道我遗漏了什么，或者如果我需要添加其他内容，我很想知道它是什么以及我可以在哪里阅读它以便我理解它。

谢谢:)

Answer 1

你有 position:fixed。还有一个错字 "lef"

Answer 2

你有一个 CSS 规则用于 calss .navbar 其中 position: relative。这会覆盖 nav

的固定设置

将 !important 添加到 nav 的 position:fixed 设置中：

nav {
  text-align: center;
  position: fixed !important;

等等

这应该可以解决问题。

http://codepen.io/anon/pen/ZWBwEW

Answer 3

这里的每个人都帮我解决了，因为我确实有一个错字，但我确实有我想做的最后改正。

特别感谢 Johannes，我意识到，如果您像我一样尝试这样做，并使用 Bootstrap，请确保在 position: fixed 之后放置 !important；在您的 css 中，因为它在这方面覆盖了 Bootstrap 的默认属性，使您无法在向下滚动时将导航栏保持在屏幕上！

Bootstrap 滚动时导航栏不向下移动

Bootstrap navbar not moving down while scrolling

css

nav

navbar