导轨，引导程序和fullpage.js navbar导航仅从第一部分起作用

Question

我有一个Rails 5应用程序，它同时使用Bootstrap 4和FullPage.js(我禁用了Turbolinks(。我有一个自举磁带，其中包含指向主页上几个不同部分的链接。只要当前显示的部分是第一个。如果我滚动或单击指向其他部分的链接，则Navbar中的所有链接都以某种方式禁用

知道这是怎么发生的吗？

这是我的Navbar(我知道我有一条登录的"外部"路线的途径，但我认为这不会导致此问题(：

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse" id="menu" role="navigation">
    <a class="navbar-brand mx-auto" href="#firstPage">My Brand</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <% if user_signed_in? %>
                <li data-menuanchor="firstPage" class="nav-item"><a class="nav-link" href="#firstPage">Link One</a></li>
                <li data-menuanchor="secondPage" class="nav-item"><a class="nav-link" href="#secondPage">Link Two</a></li>
                <li data-menuanchor="thirdPage" class="nav-item"><a class="nav-link" href="#thirdPage">Link Three</a></li>
                <li data-menuanchor="fourthPage" class="nav-item"><a class="nav-link" href="#fourthPage">Link Four</a></li>
            <% end %>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <% if user_signed_in? %>
            <li class="nav-item navbar-right">
                <%= link_to 'Log Out', destroy_user_session_path, :method => :delete, :class => 'nav-link'%>     
            </li>
            <% end %>
        </ul>
    </div>
</nav>

application.js中的fullpage.js初始化(非常简单(：

//= require jquery
//= require tether
//= require jquery_ujs
//= require bootstrap
//= require fullpage
//= require_tree .
$(document).ready(function() {
    console.log("Page Loaded")
    $('#fullpage').fullpage({
        anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
    });
});

最后，实际部分：

<div id="fullpage">
    <div class="section" data-anchor="firstPage">
        <div class="container-fluid draw-border">
            Some Content
        </div>
    </div>
    <div class="section" data-anchor="secondPage">Section 2</div>
    <div class="section" data-anchor="thirdPage">Section 3</div>
    <div class="section" data-anchor="fourthPage">Section 4</div>
</div>

Answer 1

只需使用CSS属性z-index即可将其放在任何其他层上：

.bg-inverse{
    z-index: 999;
}