Html 如何防止响应式网页上的水平滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15769229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent horizontal scrolling on responsive webpage?
提问by sharataka
I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
我正在使用 twitter bootstrap 使我的应用程序响应。当我将浏览器窗口的宽度缩小到最小尺寸或在移动设备（例如 iPhone）上查看页面时，用户可以水平滚动。水平滚动量很小，但我想将其全部删除。
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
我相信这是由于我包含的 img 容器，但我不在这里。该页面的 html 位于：http: //pastebin.ca/2347946。
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
关于如何在保持 img 容器中的滚动的同时防止页面水平滚动的任何建议？
回答by Akshaya Raghuvanshi
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, bordergo beyond the limit. And we possibly haven't added overflow: hidden;to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden;to the outer box.
我很确定您的子元素之一超出了其父元素的宽度。检查你的代码两次，如果有内部子元素的任何箱尺寸较大，因为一个原因喜欢-当宽度包括箱margin，padding，border超越极限。我们可能还没有添加overflow: hidden;到它的外部父元素。在这种情况下，它们被认为超出了它们的父元素，浏览器用滚动条显示它。因此，通过删除额外的边距、填充、边框来修复它，或者如果您只是不想头疼，只需尝试添加overflow:hidden;到外框即可。
回答by Nino ?kopac
I had the same problem, and applied this to fix it:
我遇到了同样的问题，并应用它来解决它：
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
稍微扩展一下，我只在手机上有问题，所以这是我的最终代码：
@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
我在 Github 上发现了与此相关的问题，所以我猜已经修补了较新版本的 Bootstrap。
回答by Motahar Hossain
The "overflow: hidden;" style is the remedy not the prevention. If you want to prevent this you have to check your body elements which is larger than the body. It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap). So remove all padding and margin outside the container class.
“溢出：隐藏；” 风格是补救措施而不是预防措施。如果你想防止这种情况，你必须检查比身体大的身体元素。当您在“.container”类（twitter bootstrap）之外使用带有一些“填充”或“边距”的div时，就会发生这种情况。因此，删除容器类之外的所有填充和边距。
回答by FelipeAls
Try to add (in the relevant @-rule) a max-width:
尝试添加（在相关中@-rule）a max-width：
img {
max-width: NNNpx;
}
That'll prevent imgfrom being too wide.
这将防止img太宽。
