无论出于何种原因，当在页面顶部时，我的固定导航栏的下拉菜单链接被禁用，我无法点击它们。但是，只要我滚动并且导航栏修复到顶部，它们就会再次点击。
以下是Bootply的一个示例：http://www.bootply.com/bfgbVfbK9g
它似乎在Bootply上工作正常，但在我的服务器上（在rails中）它不起作用。
这是html：
<nav class="navbar navbar-default navbar-fixed-top navdoc" id="nav-doc" data-spy="affix">
<div class='container'>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified" align='center'>
<li>
<a href="#create" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/create-icon.jpg" class='icon' >Create an Idea</a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<li><a href="#createnewidea">Create a New Idea</a></li>
<li><a href="#directidea">Direct an Existing Idea</a></li>
<li><a href="#defineidea">Define an Existing Idea</a></li>
<li><a href="#measuringcont">Measuring Contributions</a></li>
<li><a href="#transitioncreatebuild">Transition from Create to Build</a></li>
</ul>
</li>
<li>
<a href="#build" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/build-icon.jpg" class='icon'>Build an Idea</a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<li><a href="#partsandequity">Parts and Equity</a></li>
<li><a href="#ideadescription">Idea Description</a></li>
<li><a href="#summaryofbusiness">Summary of Business</a></li>
<li><a href="#summaryofproduct">Summary of Product</a></li>
<li><a href="#marketingstrategyplan">Marketing Strategy Plan</a></li>
<li><a href="#marketanalysis">Market Analysis</a></li>
<li><a href="#marketingstrategyimplementation">Marketing Strategy Implementation</a></li>
<li><a href="#executivesummary">Executive Summary</a></li>
<li><a href="#logo">Logo</a></li>
<li><a href="#wireframes">Wireframes</a></li>
<li><a href="#mockups">Mock-Ups</a></li>
<li><a href="#flowchartandschema">Flowchart & Schema</a></li>
<li><a href="#prototype">Prototype</a></li>
<li><a href="#startpart">Starting a Part</a></li>
<li><a href="#unstartpart">Unstarting a Part</a></li>
<li><a href="#finishpart">Finishing a Part & Assessment of Contribution Quality</a></li>
<li><a href="#measuringcontrbuild">Measuring Contributions</a></li>
<li><a href="#transitionbuildbuy">Transition from Build to Buy</a></li>
</ul>
</li>
<li>
<a href="#buy" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/buy-icon.jpg" class='icon'>Buy an Idea</a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<li><a href="#infoforinvestors">Information Available to Investors</a></li>
<li><a href="#actionspossiblebuy">Actions Possible</a></li>
<li><a href="#whathappensnext">What Happens Next?</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
和css：
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
-webkit-font-smoothing: antialiased;
}
.row {
margin-left:0px;
margin-right:0px;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Custom page CSS
-------------------------------------------------- */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
h1,h2,h3,h4 {
vertical-align:middle;
}
header {
background: #f16251;
height:550px;
color:#000000;
}
header h1,header h2,header h3 a,header a,header a:hover {
color:#101010;
}
header h3 {
background: #ffcc33;
padding:10px;
border-radius:3px;
padding:12px 10px 6px 10px;
}
header .dropdown-menu {
top:74px;
background: #ffcc33;
border-width:0;
}
#nav-doc {
width: 100%;
position:static;
top:-32px;
background-color: #fff;
opacity:0.95;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
#nav-doc.affix {
position: fixed;
top: 0;
z-index:10000;
}
#footer > .container {
}
@media (min-width: 767px) {
.navbar-nav.nav-justified > li{
float:none;
}
}
.navbar-nav {
margin: 1px 1px;
}
.navbar-collapse.in { /*3.0.2 bug workaround*/
overflow-y: visible;
}
.navbar-toggle {
outline:0;
}
.divider {
height:100px;
}
.panel {
border-width:0;
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #bdc3c7;
color: #333333;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
section {
color: #ffffff;
min-height: 400px;
height: auto !important;
height: 100%;
padding-top:100px;
}
.doc {
text-align: justify;
text-justify: inter-word;
}
.nav .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.nav a:hover .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus .doclink {
background-color:transparent;
}
.anchor {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
和Javascript：
$(document).ready(function($) {
$('#nav-doc').affix({
offset: {
top: 50
}
});
})
我真的不能为我的生活弄清楚什么是错的。我也以正确的顺序在application.js中提供了所需的文件。
感谢您的帮助。
编辑：以下是我的屏幕上发生的事情的图像：
任何人都知道为什么会这样吗？当我按照我的其他锚标记的答案中的建议添加http://postimg.org/image/rxp2ezbuj/时，它就会阻止它成为可用的链接。
答案 0 :(得分：-1)
您还需要在文本链接中添加data-toggle="dropdown"。
<li class="">
<a href="#" class="doclink" data-toggle="dropdown" style="display:inline-block;padding-right:0px;"><img src="/images/create-icon.jpg" class="icon">Create an Idea</a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<li><a href="#createnewidea">Create a New Idea</a></li>
<!-- the rest of your list items -->
</ul>
</li>