javascript - 尝试使用 Bootstrap 导航栏切换

Question

我正在尝试使用 bootstraps 导航栏切换，所以当我的网站在 ipad 或手机上查看时，导航将被折叠并且应该出现一个切换按钮。目前我的导航栏崩溃了，但是它没有显示切换按钮。这是我目前正在使用的代码。

<div class="row navbar">
    <div class="col-md-12">
        <nav  id="menu1"  class="navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu',
                                    'depth' => 2,
                                      'container_class' => 'collapse navbar-collapse',
                                     'menu_class' => 'nav nav-pills nav-justified',
                                    'walker' => new wp_bootstrap_navwalker() )); ?>

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

Answer 1

这里有一个 fiddle 说明了用于完成此操作的标准语法:Fiddle for basic Bootstrap 3 Navbar

以及对应的HTML:

  <!-- Navigation -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" 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>
            </div>
        </div>