Bootstrap 3侧栏菜单不切换/扩展（使用Wordpress）

Question

我在Wordpress中使用以下模板创建了侧边栏菜单：http://www.bootply.com/88026

问题：菜单不会在较小的屏幕上切换。您可以看到切换按钮，但它不会执行任何操作。不知道发生了什么。

我正在使用wordpress的bootstrap基本主题。

我通过一个名为Scripts n Styles的插件从模板中添加了JS，当我检查页面源时，它位于标题中。

当我将按钮（在下面的标题中）更改为以下内容时，它会切换主要内容，所以不太正确（我也尝试了其他各种组合，但无济于事）：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".row-offcanvas-left">

这是我的header.php：

<div class="page-container">

<!-- top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
    <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
                     <span class="sr-only"><?php _e('Toggle navigation', 'bootstrap-basic'); ?></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand site-title" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"> title</a>

    </div>
   </div>
</div>

<div class="container">
  <div class="row row-offcanvas row-offcanvas-left">

    <!-- sidebar -->
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                <?php wp_nav_menu(array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'nav', 'walker' => new BootstrapBasicMyWalkerNavMenu())); ?>

    </div>

CSS

body {
padding-top: 51px;
}
.text-center {
padding-top: 20px;
}
.col-xs-12 {
background-color: #fff;
}
#sidebar {
height: 100%;
padding-right: 0;
padding-top: 60px;
}
#sidebar .nav {
width: 95%;
}
#sidebar li {
border-right: 0px #f2f2f2 solid;
}

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
 right: -41.6%;
}

.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
 left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
padding-top:0;
}
}