如何在滚动时将 boostrap 中的导航标签固定在顶部？

Question

我在 Rails 中有一个页面，它有 4-5 个选项卡。 每个选项卡呈现一个部分（比如一个页面）。 即使用户向下滚动，我也希望能够将选项卡固定在屏幕的顶部或顶部的一些边距上。 我已经使用 Bootstrap 的<ul class="nav nav-tabs">作为标签。

Answer 1

将类navbar-fixed-top添加到 nav ul

Answer 2

@media
only screen and (your condition)
{
 [class*="nav-tabs"] 
  {
    position: fixed;
    z-index: 9;
    background-color: #fff;
    margin-top: -11%; // adjust according to your need
  }
  // you are probably gonna mess up tab-content margin as well, so adjust it as I have shown below
  [class*="tab-content"] 
  {
    margin-top: 5%; // insert n% as per your need
  } 
}