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

我使用twitter bootstrap使我的应用程序响应。当我将浏览器窗口的宽度缩小到最小尺寸或在移动设备上查看页面时（例如iPhone），用户可以水平滚动。水平滚动量很小，但我想将它们一起移除。如何防止响应网页上的水平滚动？

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

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

2013-04-02 sharataka

如何在没有CSS的情况下解决CSS问题？ Pastebin不会永远持续下去。 – cimmanon

按照bootstrap的文档检查你的代码和语法，你可能在某处放置了行，容器或列错误 –

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

来源

2013-04-03 20:43:23

我试着做你推荐的东西，但不知道在哪里看。你知道我应该把它包括在页面上吗：http://warm-chamber-7399.herokuapp.com/ – sharataka

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

img { 
    max-width: NNNpx; 
}

这样就能避免img从过宽。

来源

2013-04-02 16:30:11 FelipeAls

我试图包含这个最大宽度属性，但不知道在哪里包含它。给这个页面的任何建议？ http://warm-chamber-7399.herokuapp.com/ – sharataka

我不确定你在回答中提到哪张图片。 – sharataka

我有同样的问题，并应用此修复它：

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-29 06:43:53

辉煌的作品 – theWhiteFox

感谢你它真的很简单，但作品 – navotera

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

来源

2017-08-30 07:41:30

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

回答

相关问题