使用Bootstrap时移动端html body无法占满全宽问题咨询

该问题不属于Bootstrap本身的bug，是开发者使用时的常见操作失误导致，可按照以下优先级排查解决：

• 优先检查HTML头部是否添加了Bootstrap4强制要求的移动端适配视口标签，遗漏该标签是绝大多数同类问题的诱因，正确配置如下：

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

该标签的作用是让页面宽度严格匹配设备实际屏幕宽度，禁用iOS Safari默认的页面缩放适配，避免body宽度被默认的980px虚拟视口限制。

• 检查栅格规则是否符合Bootstrap规范：所有.row元素必须嵌套在.container（固定响应式宽度）或.container-fluid（100%视口宽度）容器内，避免.row自带的左右负margin导致页面横向溢出，间接挤压body宽度。
• 检查页面内是否存在未做响应式适配的固定宽度元素（如图片、表格、自定义块级元素），可给这类元素添加max-width: 100%样式避免超出视口宽度，图片可直接使用Bootstrap自带的img-fluid类实现响应式适配。
• 若以上配置均正确仍存在问题，可添加全局样式修复：

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

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