html - Bootstrap : using . 在 Firefox 中附加 .navbar-right

Question

我正在尝试将导航链接固定在右上角。这在 Chrome 和 Safari 中很好用，但在 Firefox 中不行(更新:在 IE 中也不行)。不知道是我哪里做错了还是FF的bug。

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;
}