Bootstrap词缀navbar只适用于刷新

我试图为我的一个朋友创建一个网站（也用于学习的目的）。现在我正在尝试使用Bootstrap创建一个粘贴导航栏。（顺便说一下，我使用ruby on rails编写了cloud9）。Bootstrap词缀navbar只适用于刷新

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

所以我真的希望你们中的一个能帮我一把。在此先感谢。

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

来源

2016-07-15 Dacruz

可能是因为turbolinks – Vishal

@Vishal你是绝对正确的，去激活turbolinks就是答案！ – Dacruz

比给我竖起大拇指;） – Vishal

问题是由turbolinks引起的。整个解决方案如下：

在的application.js文件，我不得不删除以下行：

//= require turbolinks

而在application.html.erb我设置两个数据turbolinks，轨道假：

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

来源

2016-07-15 21:06:40 Dacruz

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

Bootstrap词缀navbar只适用于刷新

回答

相关问题