移动端Bootstrap网页横向溢出问题求助

• 检查首屏section内元素的宽度设置
  首屏section是怀疑对象，优先排查内部元素：

  • 避免给元素设置固定宽度（比如width: 400px），改用Bootstrap的响应式宽度类（如w-100、col-*）
  • 检查是否有元素使用了min-width属性，若值超过移动端视口宽度（360px），会强制撑开容器导致溢出
  • 排查是否存在未正确包裹在Bootstrap栅格系统（.container/.container-fluid + .row + .col-*）内的元素，栅格系统未正确使用时容易出现溢出

• 排查负边距或绝对定位元素

  • 检查是否有元素设置了margin-left/margin-right负值，超出父容器范围
  • 绝对定位元素若设置了right: -XXpx或left: -XXpx，也会超出视口产生横向溢出

• 验证overflow-x: hidden的作用范围

  • 只给body设置overflow-x: hidden可能无效，需同时给html标签添加：

    html, body {
      overflow-x: hidden;
      width: 100%;
    }
    

  • 检查首屏section的父容器是否设置了overflow-x: visible（默认值），若有需改为hidden

• 利用Chrome开发者工具定位溢出元素
  在移动端模拟模式下：

  1. 打开开发者工具的Elements面板，选中html标签，依次检查子元素
  2. 查看右侧Layout面板的Box Model，观察元素的总宽度（内容+内边距+边框+外边距）是否超过视口宽度
  3. 右键点击可疑元素，选择Inspect，通过勾选/取消样式属性快速定位问题代码

• 检查Bootstrap类的冲突
  确认所有Bootstrap类都是v5版本的，避免残留v4类（比如v4的pull-right和v5的float-end混用）

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