Bootstrap 5默认导航在真机手机端显示超出屏幕问题求助

问题根源分析 #

你遇到的问题是自定义CSS对移动端导航菜单的尺寸、定位设置冲突导致的：

• .full-width 类设置了 height:100vh 加 margin-top:2rem，而固定导航（fixed-top）本身占据顶部5rem高度，这使得菜单整体向下偏移，同时高度撑满整个视口，自然出现上下内容超出屏幕的情况。
• .navbar-nav 的 padding-top:3rem 进一步增加了菜单内部顶部空间，加剧了内容偏移。

修复方案 #

修改移动端相关CSS规则，调整菜单的尺寸和定位：

/* 保留原有其他样式，仅替换以下移动端规则 */
@media (max-width: 768px) { 
  .navbar-nav {
    background: white; 
    padding-top: 1rem; /* 减少顶部内边距，避免内容过度下移 */
    overflow-y: auto; /* 仅在内容溢出时显示滚动条，替代强制scroll */
  }
}

@media (max-width: 768px) { 
  .full-width {  
    height: calc(100vh - 5rem); /* 减去导航栏高度，刚好填满导航下方的视口 */
    background: rgb(255, 255, 255)!important; 
    margin-top: 0!important; /* 移除顶部外边距，让菜单紧贴导航栏下方 */
    width: 100%; /* 确保菜单宽度铺满屏幕 */
  } 
}

额外优化建议 #

• 移除重复的.navbar移动端高度设置（全局和移动端都写了height:5rem，保留一个即可）。
• 尽量避免过度使用!important，可通过提升选择器权重（比如用.navbar-collapse .full-width替代单独的.full-width）来覆盖Bootstrap默认样式。

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