显示水平滚动条的移动引导菜单

Question

我目前正在使用Bootstrap 3开发一个Wordpress网站。对于导航菜单，我使用的是wp_bootstrap_navwalker。当我缩短窗口宽度时，我得到下面的图片：

移动菜单有一个水平滚动条。此外，菜单被推到全宽，因此它会挂在菜单的边缘。在Bootstrap菜单演示中，菜单链接是缩进的。

这是我的导航栏代码：

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <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(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/UCHURCH.png"/></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
                <?php
                    wp_nav_menu( array(
                        'menu'              => 'header-menu',
                        'theme_location'    => 'header-menu',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_id'      => 'bs-example-navbar-collapse-1',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
          </ul>
        </div>
      </div>
    </nav>

当我删除wp_nav_menu和硬编码链接时，这不再是一个问题。所以我知道它与wp_nav_menu和wp_bootstrap_navwalker有关。有人可以帮我弄清楚如何让这个水平滚动条消失吗？

Answer 1

尝试

.header-menu{width:100%; margin:0 auto}

或

.navbar-collapse{overflow-x:hidden}