Bootstrap 词缀导航栏仅适用于刷新答案

【问题标题】：Bootstrap affix navbar only works on refreshBootstrap 词缀导航栏仅适用于刷新
【发布时间】：2016-07-15 18:19:32
【问题描述】：

我正在尝试为我的一个朋友创建一个网站（也用于学习目的）。现在我正在尝试使用 Bootstrap 创建一个词缀导航栏。（顺便说一句，我在 cloud9 上使用 ruby on rails 进行编码）。

如果我预览我的网站，词缀导航栏可以正常工作，但是在单击导航栏中的某个链接后，导航栏只会停留在横幅下方的位置。通过检查元素，我发现在单击其中一个链接后，词缀类不再附加到导航栏。我花了几个小时尝试和修复，但似乎没有任何效果。

所以我真的希望你们中的一个可以帮助我。提前致谢。

我的 application.html.erb 的代码是：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NL-Renovatie</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body data-spy="scroll" data-target="nav" data-offset="50">

<div class="container-fluid header">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
</div>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation" data-spy="affix" data-offset-top="197">
  <div class='container-fluid'>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to root_path, class: 'navbar-brand' do %>
          <i class="fa fa-home fa-lg"aria-hidden="true"></i>
          Home
      <% end %>
    </div>
    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li id='navbar-button'>
          <%= link_to overons_path do %>
            <i class="fa fa-users" aria-hidden="true"></i>
            Over Ons
          <% end %>
        </li>
        <li id='navbar-button'>
          <%= link_to new_contact_path do %>
            <i class="fa fa-envelope" aria-hidden="true"></i>
            Contact
          <% end %>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>
<div class="container-fluid">
  <% flash.each do |key, value| %>
    <%= content_tag :div, value, class: "alert alert-#{key}" %>
  <% end %>
  <%= yield %>
</div>

</body>
</html>

我的 application.css.scss 的代码是：

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

.affix {
    top: 0;
    width: 100%;
}

.affix + .container-fluid {
    padding-top: 70px;
}

.header {
    background-color:#F44336;
    color:#fff;
    height:200px;
}

【问题讨论】：

可能是因为turbolinks
@Vishal 你说得对，解决办法就是停用涡轮链接！
不如给我竖起大拇指;)
@Vishal 怎么办？那我马上做。
没有，可能是因为我是stackoverflow的新手...

标签： css ruby-on-rails twitter-bootstrap navbar affix

【解决方案1】：

问题是由 turbolink 引起的。修复如下：

在 application.js 文件中，我必须删除以下行：

//= require turbolinks

在 application.html.erb 中，我将 data-turbolinks-track 都设置为 false：

 <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>

【讨论】：

除了禁用 Turbolinks 之外，还有其他解决方案吗？