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

问题描述 投票:2回答:1

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

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

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

我试过了:

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

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

html css bootstrap-4 navbar
1个回答
2
投票

您的代码适合我,但最好使用固定不粘。见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,它将无法正常工作。

© www.soinside.com 2019 - 2024. All rights reserved.