【问题标题】:Bootstrap 4 sticky-top for nav stopped working导航的Bootstrap 4 Sticky-top停止工作
【发布时间】:2019-03-18 08:29:49
【问题描述】:

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

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

根据我的谷歌搜索,我尝试了一些 CSS 类来修复它。我发现的所有内容要么不起作用,要么只是将导航栏固定到屏幕顶部,但这不起作用,因为我在导航栏上方有一个标题要开始。

我已经尝试过:

  • 位置:粘性
  • 位置:固定,宽度:100%,顶部:0 的类
  • 恢复到按预期工作的旧文件
  • 右对齐
  • 文本右
  • 以及其他一些我暂时不记得的事情

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

【问题讨论】:

    标签: html css bootstrap-4 navbar


    【解决方案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,它就不起作用了。

    【讨论】:

    • 该代码确实有效,但是它将其永久固定在屏幕顶部。我想拥有它,以便导航栏不会从顶部开始。这是整个页面的html codeshare.io/a30RoL 这是mainstyle.css codeshare.io/2W87m8
    • 啊,和 Chrome 有关系,在 firefox 下运行良好。让我看看能不能找到解决办法。
    • 找到它,如果你使用溢出:隐藏,在 chrome 中“粘性”将不起作用。您使用溢出-x:隐藏;在您的 html 中,正文。删除它,您的粘性标题将再次起作用。
    猜你喜欢
    • 1970-01-01
    • 2018-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-03-05
    • 1970-01-01
    • 1970-01-01
    • 2022-01-18
    相关资源
    最近更新 更多