我正在尝试为我的一位朋友创建一个网站(也用于学习目的)。现在我正在尝试用Bootstrap创建一个词缀导航栏。 (顺便说一下,我在使用ruby on rails的cloud9上编码)。
如果我预览我的网站,那么词缀导航栏的效果非常好,但在点击导航栏中的某个链接后,导航栏就会停留在横幅下方的位置。通过检查元素,我发现在单击其中一个链接后,词缀类不会再附加到导航栏。我花了几个小时尝试和修复,但似乎没有任何工作。
所以我真的希望你们其中一个人可以帮助我。 提前谢谢。
我的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;
}
答案 0 :(得分:2)
问题是由turbolinks引起的。修复方法如下:
在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 %>