引导移动菜单按钮在手机上消失

Question

我有一个 Bootstrap 站点，在本地开发中，如果您调整浏览器窗口的大小，导航栏在 桌面 上的各种尺寸（低至 320 像素宽）下都能完美运行。但是，如果您使用浏览器的设备仿真，或者查看实际手机上的页面，“汉堡”菜单按钮会向右离开屏幕，您必须向右滚动才能看到它。我整个下午都在谷歌上搜索和调整我能想到的每一种风格，没有任何改变。我希望其他人也遇到过这个问题。

三个注意事项： (1) 某些菜单样式（特别是左侧位置）可能看起来/很奇怪，但需要将菜单保持在非常窄的屏幕上。删除该定位无济于事。 (2) 我有一个拆分标题，我在其中为左右指定 XS-6 - 从技术上讲，我认为在移动 XS 大小下，所有行都应该是完整的 12 列宽度，但是再次......改变这个根本没有改变问题——它只是在第二行离开了屏幕。 (3) 这是一个wordpress网站，我用的是wp_bootstrap_navwalker。

这是我的 HTML 和 CSS... 建议？

.container{width:auto;}

.navbar-default .navbar-toggle {border-color:#4B4F5B;padding:5px;margin-top:23px;margin-right:10px;}

.navbar-default .navbar-toggle .icon-bar{background-color:#4B4F5B;}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color:#fff;}

.navbar-collapse {border-top:1px dotted #4B4F5B;position:relative;left:-10px;}

.navbar-collapse.in {overflow-y: visible;}   /*show overflow to avoid submenu scrolling*/

#menu-menu1 {position:relative;left:-35px;}

.dropdown-menu {position:relative;left:-70px;}

#header_left {margin:0;padding:0;}

#header_right {margin:0;padding:0;}

	<!-- HEADER / NAV -->
    <header class="row navrow">
    	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- LEFT SIDE -->
                <div class="col-xs-8 col-sm-12 col-md-4 col-lg-4" id="header_left">
                    <a class="brand" href="<?php echo site_url(); ?>"><img src="/myPath/logo.png" alt="myLogo" id="brand"/></a>
                </div><!-- end LEFT -->
                <!-- RIGHT -->
                <div class="col-xs-4 col-sm-12 col-md-8 col-lg-8" id="header_right">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                            <span class="sr-only">Toggle Navigation Menu</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div><!--end navbar-header-->
                    <div class="collapse navbar-collapse" id="collapse">                
                        <?php /* Primary navigation */
                            wp_nav_menu( array(
                            'menu' => 'top_menu',
                            'depth' => 0,
                            'container' => false,
                            'menu_class' => 'nav-pills',
                            //Process nav menu using navwalker
                            'walker' => new wp_bootstrap_navwalker())
                            );
                        ?>
                      
                    </div><!--end collapse-->
                </div><!--end RIGHT-->
            </div><!--end container-->
        </nav><!-- end NAV -->
	</header><!--end HEADER-->

Answer 1

原来整个身体在右侧有大约 100 像素的水平滚动空间，仅在移动设备上 - 不知道为什么，但我不是唯一看到这种情况发生的人。

为我解决的问题（感谢这篇文章：White space showing up on right side of page when background image should extend full length of page）是将这种看似无害的样式添加到 html/body：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

希望对处于相同情况的其他人有所帮助。我知道你在外面！

Answer 2

不得不提的是，从 Bootstrap 3.5+ 开始，我只需要设置溢出：

html,body
{
    overflow-x: hidden; 
}