我正在使用Bootstrap 3.0框架和现代商业主题(http://startbootstrap.com/modern-business)。使用默认的Modern Business导航设置时,主菜单下拉菜单在移动设备上的运行效果非常出色。但是,当我在HTML代码中将菜单更改为“nav-justified”时(使用Bootstrap的“nav-justified”CSS类),菜单无法按预期工作。
当您点击任何带有下拉列表的菜单项时,它会在最左侧显示一个导航下拉列表,该下拉列表在父CSS框架之外运行:
我也在使用此处的Sticky Nav解决方案:How to use the new affix plugin in twitter's bootstrap 2.1.0?
以下是我的菜单HTML代码:
<nav class="navbar navbar-inverse" role="navigation">
<div id="nav-wrapper">
<div id="nav" class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav nav-justified">
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.php">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="portfolio-1-col.html">1 Column Portfolio</a></li>
<li><a href="portfolio-2-col.html">2 Column Portfolio</a></li>
<li><a href="portfolio-3-col.html">3 Column Portfolio</a></li>
<li><a href="portfolio-4-col.html">4 Column Portfolio</a></li>
<li><a href="portfolio-item.html">Single Portfolio Item</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog-home-1.html">Blog Home 1</a></li>
<li><a href="blog-home-2.html">Blog Home 2</a></li>
<li><a href="blog-post.html">Blog Post</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="full-width.html">Full Width Page</a></li>
<li><a href="sidebar.html">Sidebar Page</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="404.html">404</a></li>
<li><a href="pricing.html">Pricing Table</a></li>
</ul>
</li>
</ul>
</div> <!-- collapse -->
</div> <!-- span12 -->
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
</div> <!-- nav-wrapper -->
</nav>
这是我在HTML底部的脚本:
<script>
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
</script>
这里也是必须要检查的JSFiddle(在左边的JSFiddle面板中链接的JS和CSS代码):http://jsfiddle.net/L94Mj/
我确定我在某种程度上围绕着答案跳舞,但是这件事让我感到困难了两天,我需要一个新鲜的大脑来看待事物。我很乐意提供任何额外的代码来帮助找到答案。