Bootstrap站点移动端竖屏右侧留白、导航栏显示不全问题排查

问题成因 #

你的问题核心是导航栏在移动端竖屏窄视口下宽度溢出，直接导致两个现象：导航栏右侧被截断、页面整体横向溢出出现右侧留白，overflow-x: hidden只是隐藏了溢出部分，并没有解决导航本身宽度超出屏幕的本质问题，所以无法修复导航截断的问题。
具体触发原因有两个：

• 你使用了无断点的navbar-expand类，该配置会让导航栏在所有尺寸屏幕下强制展开，不会自动折叠为汉堡菜单；
• 每个导航项都设置了mx-5（左右各1.5rem外边距）+fs-3大字体，三个导航项的总宽度在移动端竖屏的窄视口下已经超过了屏幕宽度，直接触发溢出。

解决方法 #

方案1：启用响应式折叠导航（最推荐，符合Bootstrap设计规范和移动端交互习惯） #

将原有导航代码替换为带断点的折叠导航配置，仅在宽度≥576px的设备（平板、桌面、移动端横屏）下展开导航，移动端竖屏自动折叠为汉堡按钮，代码示例如下：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <!-- 汉堡按钮，小屏显示 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 导航内容容器 -->
  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <ul class="navbar-nav mb-2 mb-sm-0">
      <li class="nav-item fs-sm-3 fs-5 mx-sm-5 mx-2">
        <a class="nav-link link-color" aria-current="page" href="{% url 'homepage' %}">About</a>
      </li> 
      <li class="nav-item fs-sm-3 fs-5 mx-sm-5 mx-2">
        <a class="nav-link link-color" aria-current="page" href="{% url 'gallery' %}">Gallery</a>
      </li> 
      <li class="nav-item fs-sm-3 fs-5 mx-sm-5 mx-2">
        <a class="nav-link link-color" aria-current="page" href="{% url 'guestbook' %}">Guestbook</a>
      </li>
    </ul>
  </div>
</nav>

注：代码里用了justify-content-center直接实现导航居中，你可以删掉原来自定义CSS里的.navbar-nav.navbar-center { margin: auto; }规则。

方案2：保留全展开导航，适配小屏尺寸 #

如果你不想用折叠汉堡菜单，可以直接给导航项加响应式尺寸类，自动适配不同屏幕的间距和字体大小，不需要额外写CSS，只需修改原有nav-item的类即可：
把每个nav-item的fs-3 mx-5替换为fs-sm-3 fs-5 mx-sm-5 mx-2，意思是sm及以上大屏用fs-3字体、mx-5间距，小屏自动切换为更小的fs-5字体、mx-2间距，总宽度就不会超出竖屏视口。

额外优化建议 #

• 把head区域的viewport和meta charset标签移到所有CSS、JS引入的最前面，保证视口配置优先生效；
• 给站点内所有图片加上Bootstrap自带的img-fluid类，避免图片宽度超出容器导致页面溢出。

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