26

我正在使用 twitter 引导程序来使我的应用程序响应。当我将浏览器窗口的宽度缩小到最小尺寸或在移动设备（例如 iPhone）上查看页面时，用户可以水平滚动。水平滚动的数量很小，但我想将其全部删除。

我相信这是由于我包含的 img 容器，但我不在这里。该页面的 html 位于此处： http: //pastebin.ca/2347946。

关于如何防止页面水平滚动同时仍保持 img 容器中的滚动的任何建议？

4

5 回答 5

35

我有同样的问题，并应用它来解决它：

body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

扩展一下，我只是在手机上遇到了问题，所以这是我的最终代码：

@media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

我在 Github 上发现了这方面的问题，所以我猜 Bootstrap 的更新版本已经打​​了补丁。

于 2016-01-29T06:43:53.003 回答
30

我很确定您的某个子元素的某个地方超出了其父元素的宽度。检查您的代码两次，如果内部子元素的任何 box-size 很大，因为其中一个原因，例如 - 当包含margin,padding的框宽度border超出限制时。而且我们可能还没有添加overflow: hidden;到它的外部父元素。在这种情况下，它们被认为超出了它们的父元素，浏览器会用滚动条显示它。所以通过删除额外的边距、填充、边框来修复它，或者如果你不想让任何头痛，只需尝试添加overflow:hidden;到外框。

于 2013-04-03T20:43:23.073 回答
3

“溢出：隐藏；” 风格是补救措施而不是预防措施。如果你想防止这种情况发生，你必须检查比身体大的身体元素。当您在“.container”类（twitter bootstrap）之外使用带有一些“填充”或“边距”的 div 时，就会发生这种情况。所以删除容器类之外的所有填充和边距。

于 2017-08-30T07:41:30.457 回答
2

事实证明，我放大了 100% 以上，导致页面滚动。Cmd+0 帮助将缩放比例提高到 100%，从而摆脱了滚动。

于 2021-04-24T12:23:00.237 回答
0

尝试添加（在相关的@-rule） a max-width：

img {
    max-width: NNNpx;
}

这样可以防止img太宽。

于 2013-04-02T16:30:11.787 回答