Question

我构建了一个静态引导程序网站，导航栏工作正常，但在转换为wordpress模板的过程中，我偶然发现了一个问题并无法解决问题。

基本上，当导航栏折叠以适合正确的屏幕宽度时，导航栏菜单始终会展开，切换按钮也不会切换为隐藏/显示。

以下是我的完整导航栏HTML代码：

  <div id="navbar-wrapper" class="navbar-wrapper">
      <div class="navbar navbar-default navbar-static-top" role="navigation">
         <div class="navbar-inner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img class="logo" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo_blue_ls.png" alt="Relax on Ryan"></a>    
                </div><!-- navbar header -->

                <!-- if the menu (WP admin area) is not set, then the "menu_class" is applied to "container". IN other words, it overwrites the "container_class". Ref: http://wordpress.org/support/topic/wp-nav-menu-class-usage-bug?replies=4 -->

                <?php
                    wp_nav_menu( array(

                        'theme_location'    =>  'primary',
                        'container'         =>  'nav',
                        'container _class'  =>  'navbar-collapse collapse',
                        'menu_class'        =>  'nav navbar-nav navbar-right'

                    ) );
                ?>

            </div><!-- navbar-container -->
        </div><!-- navbar-inner -->
    </div><!-- navbar -->   
 </div><!-- navbar-wrapper -->

非常感谢任何帮助。我想知道我的数据目标是否可能被错误定义了？

谢谢，荒地

Answer 1

<div id="navbar-wrapper" class="navbar-wrapper">
   <nav id="navigation" class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

              <a class="navbar-brand" href="<?php echo home_url(); ?>">
                 <img id="logo" src="{logo}" class="img-responsive" alt="Image">
              </a>
         </div>
         <?php wp_nav_menu(array(
            'menu'            => 'primary',
            'theme_location'  => 'primary',
            'depth'           => 2,
            'container'       => 'div',
            'container_class' => 'navbar-collapse collapse',
            'container_id'    => 'bs-example-navbar-collapse-1',
            'menu_class'      => 'nav navbar-nav navbar-right',
            ));
         ?>
      </div><!-- /.container -->
   </nav>
</div>

wordpress bootstrap导航栏总是扩展

1 个答案: