我在本地开发中有一个Bootstrap站点,如果您调整浏览器窗口的大小,导航栏在桌面上的每种尺寸(低至320px宽)都能正常工作。但是,如果您使用浏览器的设备模拟,或查看实际手机上的页面,“汉堡包”菜单按钮会从屏幕右侧移开,您必须向右滚动才能看到它。我整个下午花了大量时间用谷歌搜索和调整我能想到的每一种风格,没有任何改变。我希望其他人遇到这个问题。
三个注释: (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-->
答案 0 :(得分:3)
原来整个身体只有100px的水平滚动空间向右移动,仅限移动设备 - 不知道为什么,但我并不是唯一一个看到过这种情况的人。
为我修复了什么(感谢这篇文章:White space showing up on right side of page when background image should extend full length of page)将这种看似无害的风格添加到html / body:
{{1}}&#13;
希望在同样的情况下帮助其他人。我知道你在那儿!
答案 1 :(得分:0)
我不得不提到,从Bootstrap 3.5+开始,我只需要设置溢出即可:
html,body
{
overflow-x: hidden;
}