使用Bootstrap适配网站移动端遇到布局问题求助

让我来帮你搞定这个移动端的布局问题——核心就是需要右滑才能看到导航栏，还有页面右侧贯穿到底的空白，先从你给出的.masthead代码入手分析，再给你几个针对性的修复步骤：

一、先解决右侧空白与横向滚动问题 #

这个问题大概率是页面中某个元素的宽度超出了移动端视口，导致浏览器出现横向滚动条。最直接的修复方式是给全局容器强制隐藏横向溢出：

body {
  overflow-x: hidden;
}

这能立刻阻止页面被横向撑开，右侧的空白也会随之消失。

二、针对你提供的.masthead代码优化 #

你的.masthead样式里有个可能触发问题的细节：background-repeat:repeat。因为你用的是全屏banner图，重复背景在小屏幕上可能会意外溢出视口，建议改成no-repeat：

.masthead {
  position:relative;
  width:100%;
  height:auto;
  min-height:35rem;
  padding:15rem 0;
  background:linear-gradient(to bottom,rgba(22,22,22,.3) 0,rgba(22,22,22,.7) 75%,#161616 100%),url(../img/bg-masthead.jpg);
  background-position:center;
  background-repeat:no-repeat; /* 替换原有的repeat属性 */
  background-attachment:scroll;
  background-size:cover;
}

另外，移动端的padding:15rem 0会让头部区域过高，也可以加个媒体查询做适配优化：

@media (max-width: 768px) {
  .masthead {
    padding: 8rem 0; /* 移动端减少上下内边距，提升体验 */
  }
}

三、修复导航栏需要右滑才能看到的问题 #

导航栏被挤到右侧，通常是这两个原因导致的：

• 导航栏容器设置了position:absolute/fixed但没有正确对齐左侧，检查导航栏的CSS，确保它的定位属性正确：

  .navbar {
    position: fixed;
    left: 0; /* 强制靠左对齐 */
    top: 0;
    width: 100%;
  }
  

• 汉堡菜单的触发逻辑有问题，比如菜单展开时给页面加了额外宽度，或者菜单本身的容器超出了视口。检查菜单的CSS，确保它的宽度是100%或者fit-content，不要超出视口范围。

最后排查步骤 #

如果上面的方法还没解决，打开浏览器的移动端调试工具，逐个检查页面元素：

• 找哪个元素的width超过了100vw（视口宽度）
• 检查是否有元素设置了负的margin-left/right，导致页面被意外撑开

内容的提问来源于stack exchange，提问作者Umer