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

Answer 2

您是否已将链接引导至引导JavaScript文件？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

如果是，您使用完整的JavaScript文件还是只使用某些组件的文件？响应式导航栏要求折叠插件包含在您的Bootstrap版本中。

希望这有帮助

尝试使用Bootstrap导航栏切换

2 个答案: