Bootstrap导航栏桌面端响应正常 移动端宽度超出屏幕显示异常

问题解决步骤 #

1. 确认视口标签配置

先检查你的HTML文件<head>标签内是否添加了正确的移动端适配视口标签，缺少该标签会直接导致移动端宽度计算异常：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

2. 补充移动端导航栏宽度限制样式

你当前的CSS只针对屏幕宽度≥992px的设备设置了导航栏宽度，小于992px的移动端没有做宽度约束，加上内部元素的字间距、边距等属性很容易撑宽容器，在style.css中添加以下代码即可：

/* 全局盒模型统一，避免padding撑宽容器 */
* {
  box-sizing: border-box;
}

/* 移动端导航栏适配 */
@media (max-width: 991.98px) {
  #sideNav {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 适配移动端导航栏标题宽度，避免文字过长撑宽 */
  #sideNav .navbar-brand .d-block.d-lg-none {
    max-width: calc(100vw - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

3. 额外兜底方案

如果修改后仍存在横向滚动条，给body标签添加样式禁止横向溢出即可：

body {
  overflow-x: hidden;
}

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