Bootstrap <img>响应式问题：移动端右侧出现间隙且页面无法填满

云上老周

2026-5-25

解决移动端页面右侧间隙的问题

看起来你遇到的是Bootstrap布局里常见的移动端横向空白问题，我帮你梳理几个排查和解决的方向：

第一步：补上关键的viewport元标签
这是移动端适配的基础，如果没加，浏览器会按桌面宽度渲染页面，必然出现右侧间隙。把这段代码放到<head>标签里：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
第二步：修正row的嵌套结构
Bootstrap的.row必须放在.container或.container-fluid内部使用——因为.row自带负margin来抵消列的padding，如果脱离容器，负margin会让内容超出视口范围，导致横向滚动（也就是你看到的右侧间隙）。修正后的结构应该是：
```
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <img src="\Great Price.png" class="img-responsive">
    </div>
  </div>
</div>
```
另外，.img-responsive已经内置了max-width:100%; height:auto;，不需要额外加style="width:100%"，重复设置反而可能引发渲染问题。
第三步：重置html和body的默认样式
有些浏览器会给html/body添加默认的margin或padding，导致页面无法填满视口。可以添加这段CSS来重置：
```
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 紧急情况下强制隐藏横向溢出，建议先找根源再用 */
}
```
关于.row-fluid的说明
这个类是Bootstrap 2的语法，Bootstrap 3及以后版本已经废弃了，改用.container-fluid配合.row实现流式布局，所以加.row-fluid不仅没用，还可能和现有布局冲突哦。