引导导航菜单在 WordPress 中不起作用

Question

我在我的 WordPress 主题中使用引导程序。但导航菜单样式显示不正确。 Bootstrap 排队很好。 这是我的输出菜单代码

<div class="nav-container">
     <nav class="navbar navbar-default">
          <?php
             wp_nav_menu( array(
                'menu'    =>    'primary',
                 'menu_class' => 'nav navbar-nav',
                  'container' =>    '<ul>'
                   ) );
                   ?>
               </nav>
      </div>

代码输出

 <nav class="navbar navbar-default">
 <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

但显示的导航链接没有引导导航样式。 check screenshot

Answer 1

我会强烈建议专门为 Bootstrap 使用 custom navwalker。

检查this。

用法是这样的，但请使用上面的链接查看其易于遵循的文档。

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="<?php echo home_url(); ?>">
                <?php bloginfo('name'); ?>
            </a>
    </div>

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

Answer 2

根据引导程序更改您的 nav 结构，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<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>            
          </div>
<div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
</nav>

你也可以在Fiddle找到这个