如何防止水平滚动响应网页

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

Answer 2

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

Answer 3

"overflow: hidden;"样式是补救而不是预防。如果你想防止这种情况发生，你必须检查你的body元素是否大于body。当你在div外加上"padding"或"margin"时，就会发生这种情况。容器"类(twitter bootstrap)。因此，删除容器类之外的所有padding和margin

Answer 4

原来我放大了超过100%，导致页面滚动。Cmd+0帮助将缩放到100%，从而消除了滚动

Answer 5

尝试添加(在相关@-rule中)max-width:

img {
    max-width: NNNpx;
}

这将防止img太宽