Question

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

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

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

Answer 1

我非常确定你的一个子元素超出了其父元素的宽度。如果包含margin，padding，border的方框宽度超出了限制。我们可能没有将overflow: 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已被修补。

Answer 3

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

img {
    max-width: NNNpx;
}

这会阻止img过宽。

Answer 4

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

Answer 5

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

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

5 个答案: