Bootstrap：在Firefox中使用.affix和.navbar-right

Question

我正在尝试在右上角固定导航链接。这适用于Chrome和Safari，但不适用于Firefox（更新：也不适用于IE）。我不知道我做错了什么，或者它是FF中的错误。

Here's a bootply和代码：

HTML：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li data-spy="affix" data-offset-top="40"><a href="#">Link fixed</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS：

body {height:1500px;}
.navbar-default .navbar-right>li>a {background:#333; color:#fff;}
.navbar-right .affix {position:fixed;}

有关于此的任何想法吗？ 谢谢。

Answer 1

原因是最初链接是静态的，距离容器右侧16px(15px padding-right of .container-fluid + 1px border-right of .navbar)。当用户向下滚动并且链接变为fixed时，相对于页面设置fixed位置。您可以尝试设置以下样式并看到它对您有所帮助，但我不明白为什么Chrome和FF表现不同。

.navbar-right .affix {
    position:fixed;
    right:16px;
}