Bootstrap导航菜单不工作在WordPress

我在我的WordPress主题中使用引导。但导航菜单样式显示不正确。 Bootstrap入列罚款。这里是我的输出菜单代码的代码Bootstrap导航菜单不工作在WordPress

<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>

但导航链接都出现

<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>

输出，无需引导的导航风格。 check screenshot

来源

2017-09-25 Ali

更改根据您的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

来源

2017-09-25 10:10:03 kravisingh

与此代码同样的问题，用于导航的引导样式不适用。其实我的代码也没有WordPress的工作正常。 – Ali

你是否能够在某处共享那个马车菜单链接？ – kravisingh

我会高度建议使用一个custom navwalker Bootstrap具体。

检查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>

来源

2017-09-25 10:37:03 ProEvilz

Bootstrap导航菜单不工作在WordPress

回答

相关问题