html - 如何防止在响应式网页上水平滚动？

Question

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

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

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

Answer 1

我遇到了同样的问题，并应用它来解决它:

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 已被修补。