Question

我尝试了无数线程，但在将其转换为移动/平板电脑的word press主题时，无法让我的bootstrap导航菜单下拉。

我的导航代码

<nav class="navbar navbar-expand-md navbar-dark bg fixed-top logo">

      <a class="navbar-brand" href="index.html"><img src="<?php bloginfo(template_directory); ?>/resources/images/Logo-blue-copy.png" ></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
<?php
      wp_nav_menu( array(
  'theme_location'  => 'primary',
  'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
  'container'       => 'div',
  'container_class' => 'collapse navbar-collapse',
  'container_id'    => 'bs-example-navbar-collapse-1',
  'menu_class'      => 'navbar-nav mr-auto',
  'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
  'walker'          => new WP_Bootstrap_Navwalker(),
) );



?>      
    </nav>

来自bootstrap CDN的jquery目前位于页脚中..

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

我的函数文件包含

 <?php register_nav_menus( $locations ); 

// Register Custom Navigation Walker
 require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

wp_register_script( 'jQuery', "https://code.jquery.com/jquery-3.2.1.slim.min.js", null, null, true );
wp_enqueue_script('jQuery');

wp_register_script( 'jQuery', "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js", null, null, true );
wp_enqueue_script('jQuery');

wp_register_script( 'jQuery', "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js", null, null, true );
wp_enqueue_script('jQuery');


?>

<?php register_nav_menus( $locations ); 

// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

?>

一些帮助太棒了。感谢。

Answer 1

也许你必须使用'walker'=＆gt;新的WP_Bootstrap_Navwalker（）没有逗号结尾

  <?php
  wp_nav_menu( array(
  'theme_location'  => 'primary',
  'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
  'container'       => 'div',
  'container_class' => 'collapse navbar-collapse',
  'container_id'    => 'bs-example-navbar-collapse-1',
  'menu_class'      => 'navbar-nav mr-auto',
  'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
  'walker'          => new WP_Bootstrap_Navwalker()
) );

Answer 2

我怀疑 - 问题出现在

中

'container_id'=＆gt; 'navbarsExampleDefault'，（在header.php文件中）

使用开发工具检查网站的静态版本后，设置如上所述。

Bootstrap响应导航按钮不起作用

2 个答案: