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只適用於刷新

回答

相關問題