twitter-bootstrap 在移动浏览器中左右移动页面
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/44667161/
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
Page moving left and right while in mobile browser
提问by adam g
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
我正在做一个项目,但遇到了一个大问题。我正在使用引导程序,我需要页面为全宽。我正在使用容器流体。在桌面上一切正常,但在移动设备上,页面左右移动,就好像容器比显示器大一样。没有滚动条,但你可以用手指移动它,它只移动一点点,但很烦人。我什至不知道去哪里检查了。它是一个建立在 Sparkpay CMS 上的网站,它使用引导程序 3。我什至不确定如何引用这个问题,我一直在网上寻找解决方案,但我没有找到很多与我的情况类似的帖子。
The link is: https://store55652.mysparkpay.com/
链接是:https: //store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
我知道我应该发布代码,但我真的很茫然。我已经浏览了我所有的 CSS(有几个文件)我无法弄清楚。这里的任何帮助将不胜感激。
回答by Vlad Alivanov
This works for me
这对我有用
html, body {width: auto!important; overflow-x: hidden!important}
回答by copia li
Seems even on desktop you can scroll left/right.
似乎即使在桌面上也可以向左/向右滚动。
The simple way to fix is add:
修复的简单方法是添加:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
但实际上你应该修复溢出元素。例如,您将容器流体的左/右填充设置为 0,然后您也应该将行的左/右边距设置为 0(现在为 -15px)。否则它会从容器中出来。
回答by nyi
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
只需在正文和文本中复制此代码即可。我会帮你

