如何将引导导航栏转换为 wordpress答案

【问题标题】：How to convert a bootstrap navbar into wordpress如何将引导导航栏转换为 wordpress
【发布时间】：2016-11-05 13:55:59
【问题描述】：

我正在尝试将引导网站转换为 wordpress，而我目前的问题是导航栏。我为 wordpress 创建了所有文件，创建了菜单并且可以实际看到。问题是在小屏幕中，菜单没有折叠。下面是我的 header.php 代码：

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <link rel="icon" href="../../favicon.ico">
 <title><?php bloginfo('name') ?></title>
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="<?php bloginfo('stylesheet_url') ?>" rel="stylesheet">
  <script src="js/ie-emulation-modes-warning.js"></script>    
  <?php wp_head(); ?>
  </head>
  <body>
   <nav class="navbar navbar-inverse">
   <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="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <?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 navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
      ?>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

后面是index.php：

<?php get_header(); ?>
<?php get_footer(); ?>

functions.php：

<?php 
  require_once('wp_bootstrap_navwalker.php');
  register_nav_menus( array(
 'primary' => __( 'Primary Menu', 'Experiment Website' ),
  ) );
?>

最后是页脚：

<script      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<?php wp_footer(); ?>

如何让菜单在小屏幕中折叠？

【问题讨论】：

标签： php html css wordpress twitter-bootstrap

【解决方案1】：

你已经用 navbar-collapse collapse div 包裹了你的 navwalker，所以从你的 navwalker 代码中删除这一行 --> container_class => collapse navbar-collapse,

【讨论】：

非常感谢您的帮助。它工作得很好，而且我确实学到了更多。
很高兴我能帮助 Elton。如果它解决了问题，请将此标记为正确答案。干杯人