如何防止响应式网页上的水平滚动？

Question

我正在使用twitter bootstrap让我的应用程序响应.当我将浏览器窗口的宽度缩小到最小尺寸或在移动设备上查看页面时(iPhone,示例),用户可以水平滚动.水平滚动的数量很小,但我想将它们全部删除.

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

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

Answer 1

我很确定你的一个子元素超出了其父元素的宽度.检查你的代码两次,如果有内部子元素的任何箱尺寸较大时,框的宽度包括因的原因之一喜欢- ,,margin 超越极限.我们可能没有添加到其外部父元素.在这种情况下,他们被认为超出了他们的父元素,浏览器用滚动条显示它.因此,通过删除额外的边距,填充,边框或者如果您不想让任何头疼,只需尝试添加到外框即可修复它.paddingborderoverflow: hidden;overflow:hidden;

Answer 2

我有同样的问题,并应用此来修复它:

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