用于导航的Bootstrap 4 sticky-top停止工作

Question

我的导航栏应该在滚动时粘在顶部。这工作了一段时间，直到我试图将登录按钮移到右侧。在多次尝试移动登录按钮失败后，我恢复到之前的状态，粘性导航栏停止工作。

这是导航栏https://codeshare.io/GLJmWV的代码

从我的谷歌搜索，我已经尝试了一些CSS类来修复它。我找到的所有东西要么没有工作，要么只是将导航栏固定到屏幕的顶部，但这不起作用，因为我在导航栏上面有一个标题开始。

我试过了：

• 位置：粘
• 位置的类：固定，宽度：100％，顶部：0
• 恢复到按预期工作的旧文件
• 证明右
• 文本右
• 还有一些其他我不记得的东西

编辑：这是整个页面https://codeshare.io/a30RoL的代码，这里是我写的css代码以及https://codeshare.io/2W87m8

Answer 1

您的代码适合我，但最好使用固定不粘。见this

这意味着问题出在其他地方，您是否尝试过复制引导程序：

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

Chrome也有一些问题，如果你使用overflow：hidden，它将无法正常工作。