文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap affix navbar仅在刷新时有效

问Bootstrap affix navbar仅在刷新时有效
EN

Stack Overflow用户

提问于 2016-07-16 02:19:33

回答 1查看 802关注 0票数 1

我正在试着为我的一个朋友创建一个网站(也是为了学习目的)。现在我正在尝试用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;
}

css

ruby-on-rails

twitter-bootstrap

navbar

affix

回答 1

Stack Overflow用户

发布于 2016-07-16 05:06:41

这个问题是由turbolink引起的。修复方法如下：

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

//= require turbolinks

在application.html.erb中，我将两个数据-turbolinks-track都设置为false：

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38402766

复制

相似问题

问Bootstrap affix navbar仅在刷新时有效
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap affix navbar仅在刷新时有效EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap affix navbar仅在刷新时有效
EN