在响应设备上的Bootstrap 3.0中使用nav-justified的麻烦

时间:2014-01-14 00:59:45

标签: css twitter-bootstrap menu

我正在使用Bootstrap 3.0框架和现代商业主题(http://startbootstrap.com/modern-business)。使用默认的Modern Business导航设置时,主菜单下拉菜单在移动设备上的运行效果非常出色。但是,当我在HTML代码中将菜单更改为“nav-justified”时(使用Bootstrap的“nav-justified”CSS类),菜单无法按预期工作。

当您点击任何带有下拉列表的菜单项时,它会在最左侧显示一个导航下拉列表,该下拉列表在父CSS框架之外运行:

Navigation Error

我也在使用此处的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/

我确定我在某种程度上围绕着答案跳舞,但是这件事让我感到困难了两天,我需要一个新鲜的大脑来看待事物。我很乐意提供任何额外的代码来帮助找到答案。

0 个答案:

没有答案