CSS 页面右侧的 Twitter 引导程序白色间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16704893/
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
Twitter bootstrap white gap on right side of page
提问by Lynx
I am having an issue with my responsive stylesheet with Twitter Bootstrap. The site shows up fine with no issues but for whatever reason the responsive tablet and phone have this huge white gap to the right of the page. Its not the scroll bar issue its a huge white gap
我的 Twitter Bootstrap 响应式样式表出现问题。该网站显示正常，没有任何问题，但无论出于何种原因，响应式平板电脑和手机在页面右侧都有这个巨大的白色间隙。它不是滚动条问题，它是一个巨大的白色间隙
http://i.imgur.com/JeRRRqq.png
http://i.imgur.com/JeRRRqq.png
I dont believe I have changed to much at all here. Nothing with width or anything. Inspected the objects in Chrome and couldnt see anything overflowing over width wise
我不相信我在这里改变了很多。没有宽度或任何东西。检查 Chrome 中的对象，看不到任何超出宽度的东西
回答by Nicola Pedretti
This might be a little late but I found the other answers to be misleading.
这可能有点晚了，但我发现其他答案具有误导性。
It is true that the row class is what is causing the issue, but that is because it is always supposed to be placed inside a container element.
确实，行类是导致问题的原因，但那是因为它始终应该放置在容器元素内。
from http://getbootstrap.com/css/:
来自http://getbootstrap.com/css/：
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
The container element usually has a -15px padding on both right and left and the row class has a 15px padding on right and left. The two cancel each other out. If one of the two is not present you will see extra space.
容器元素通常在左右两侧都有 -15px 的填充，而 row 类在左右两侧都有 15px 的填充。两者相互抵消。如果两者之一不存在，您将看到额外的空间。
回答by Jules
Have you tried:
你有没有尝试过：
html, body { overflow-x: hidden; }
Can you post a fiddle?
你能发个小提琴吗？
回答by Scott Selby
Add the following meta tag to your HTML
将以下元标记添加到您的 HTML
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Also try setting
也尝试设置
html, body. div{
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
on the html and body
在 html 和 body 上
回答by Jacob
I am having the same problem. I discovered the object that was causing the padding to be created was Bootstrap's "row" class.
我有同样的问题。我发现导致创建填充的对象是 Bootstrap 的“行”类。
If you add
如果添加
.row {
padding-right: 0px;
margin-right: 0px;
}
to your CSS file/row objects this should fix at least one of items causing padding on your page.
到您的 CSS 文件/行对象，这应该至少修复导致页面填充的项目之一。
回答by Abolfazl Miadian
I had this problem, no one of this answers, did not help me, i solved my problem with this way:
我遇到了这个问题，没有一个答案，没有帮助我，我用这种方式解决了我的问题：
body { overflow-x: hidden; width: 100vw;}
回答by Nicholas Newenham
Generally this happens because you have a div breaking the boundaries of your set container width,could be a div or sections padding, margin, positioning.. you can use the inspector arrow or overflow:hidden on the container tag to see what section you might have breaking the width.
通常发生这种情况是因为您有一个 div 打破了您设置的容器宽度的边界，可能是一个 div 或部分填充、边距、定位..您可以使用检查器箭头或溢出：隐藏在容器标签上以查看您可能会使用的部分有断宽。
回答by Anupam
I had a very similar issue recently which took me quite sometime to figure out. For me, it was not the usual row/container issue. I was using a form-controlto render checkboxes manually. In Bootstrap, all textual elements with form-controlhave width:100%by default. Having many checkboxes online was causing them to spill over (invisibly) and causing this large white gap on the right. Surprisingly, it wasn't easy to debug this using Chrome Dev tools either.
我最近遇到了一个非常相似的问题，我花了很长时间才弄清楚。对我来说，这不是通常的行/容器问题。我正在使用 aform-control手动呈现复选框。在引导，所有的文本元素form-control都width:100%在默认情况下。在线有许多复选框会导致它们溢出（不可见）并导致右侧出现这个大的白色间隙。令人惊讶的是，使用 Chrome Dev 工具进行调试也并不容易。
I am now using the following solution to set the widthto auto;(thisanswer helped):
我现在用以下解决方案来设置width到auto;（这个答案帮助）：
<input class="form-control form-control-inline" type="checkbox"... ... .. />
<input class="form-control form-control-inline" type="checkbox"………… />
and
和
.form-control-inline {
width: auto;
}
Hope it helps someone
希望它可以帮助某人
回答by AverageJoe
I've had a similar issue on mobile devices. The problem was that I had hidden an element on smaller screen sizes, but forgot its parent container. This container was still being rendered even though its content was empty, which lead to a big white gap on the right site. Hiding the parent element instead of the child solved this for me.
我在移动设备上遇到过类似的问题。问题是我在较小的屏幕尺寸上隐藏了一个元素，但忘记了它的父容器。即使它的内容是空的，这个容器仍在渲染，这导致在正确的站点上出现一个很大的空白。隐藏父元素而不是子元素为我解决了这个问题。
回答by vikvan
Also, check to see how you're using containers. They can't be nested, they will cause problems.
此外，请检查您如何使用容器。它们不能嵌套，它们会导致问题。
You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
您可以选择两个容器之一在您的项目中使用。请注意，由于填充等原因，两个容器都不是可嵌套的。
回答by Eddie Teixeira
I just had a very similar problem, and after spending some time, I realized I had applied CSS styling adding padding of 0px on both left and right of a container-fluid class, and therefore the styling overrode the default -15px padding needed on container-fluid to hold rows in their proper place.
我刚刚遇到了一个非常相似的问题，花了一些时间后，我意识到我已经应用了 CSS 样式，在容器流体类的左侧和右侧添加了 0px 的填充，因此样式覆盖了容器上所需的默认 -15px 填充-fluid 将行保持在适当的位置。
