页面右侧的Twitter引导白色间隙

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

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中的对象，看不到任何溢出宽度的东西

8 个解决方案

#1

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填充，行类在左右两侧有15px填充。两人相互抵消。如果两个中的一个不存在，您将看到额外的空间。

#2

Have you tried:

你有没有尝试过：

html, body { overflow-x: hidden; }

Can you post a fiddle?

你可以发一个小提琴吗？

#3

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和身体上

#4

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文件/行对象，这应该至少修复一个导致页面填充的项目。

#5

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或部分填充，边距，定位..你可以使用检查器箭头或溢出：隐藏在容器标签上，看看你可能会有哪个部分打破了宽度。

#6

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.

您可以选择在项目中使用两个容器中的一个。请注意，由于填充等原因，两个容器都不可嵌套。

Source: http://getbootstrap.com/css/#overview-container

资料来源：http：//getbootstrap.com/css/#overview-container

#7

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填充 - 将行放在适当的位置。

#8

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-control to render checkboxes manually. In Bootstrap, all textual elements with form-control have 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.

我最近遇到了一个非常类似的问题，这让我花了很长时间才弄明白。对我来说，这不是通常的行/容器问题。我正在使用表单控件手动呈现复选框。在Bootstrap中，具有表单控件的所有文本元素都具有宽度：默认为100％。在线拥有许多复选框导致它们溢出（无形）并在右侧产生这个大的白色间隙。令人惊讶的是，使用Chrome Dev工具进行调试并不容易。

I am now using the following solution to set the width to auto; (this answer helped):

我现在使用以下解决方案将宽度设置为auto; （这个答案有帮助）：

<input class="form-control form-control-inline" type="checkbox" ... ... .. />

and

和

.form-control-inline {
  width: auto;
}

Hope it helps someone

希望它可以帮到某人

#1