Question

我在使用Twitter Bootstrap的响应样式表时出现问题。该网站显示没有问题，但无论出于何种原因，响应式平板电脑和手机在页面右侧有这个巨大的白色间隙。它不是滚动条发出巨大的白色差距

http://i.imgur.com/JeRRRqq.png

我不相信我在这里已经改变了很多。没有任何宽度或任何东西。检查了Chrome中的对象，看不到任何溢出宽度的内容

Answer 1

这可能有点迟，但我发现其他答案有误导性。

确实行类是造成问题的原因，但这是因为它总是应该放在容器元素中。

来自http://getbootstrap.com/css/：

行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。

容器元素通常在左右两侧都有-15px填充，行类在左右两侧有15px填充。两人相互抵消。如果两个中的一个不存在，您将看到额外的空间。

Answer 2

你试过了吗？

html, body { overflow-x: hidden; }

你能发一个小提琴吗？

Answer 3

将以下元标记添加到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" />

同时尝试设置

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

在html和body

上

Answer 4

我遇到了同样的问题。我发现造成填充的对象是Bootstrap＆＃34; row＆＃34;类。

如果你添加

.row {
  padding-right: 0px;
  margin-right: 0px;
}

到您的CSS文件/行对象，这应该至少修复一个导致页面填充的项目。

Answer 5

一般情况下会发生这种情况，因为你有一个div打破了你的集合容器宽度的边界，可能是一个div或节填充，边距，定位..你可以使用检查箭头或溢出：隐藏在容器标签上看看是什么您可能已打破宽度的部分。

Answer 6

我最近遇到了一个非常类似的问题，这让我花了很长时间才弄明白。对我来说，这不是通常的行/容器问题。我正在使用form-control手动渲染复选框。在Bootstrap中，form-control的所有文字元素都有width:100% by default。在线拥有许多复选框导致它们溢出（无形）并在右侧产生这个大的白色间隙。令人惊讶的是，使用Chrome Dev工具调试也不容易。

我现在使用以下解决方案将width设置为auto;（this答案帮助）：

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

和

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

希望它有助于某人

Answer 7

我遇到了一个非常类似的问题，经过一段时间后，我意识到我已经应用了CSS样式，在容器流体类的左右两侧添加了0px的填充，因此样式覆盖了默认的-15px填充在容器 - 液体上需要将行保持在适当的位置。

Answer 8

我在移动设备上也遇到过类似的问题。问题是我在较小的屏幕尺寸上隐藏了一个元素，但忘记了它的父容器。即使该容器的内容为空，该容器仍在渲染，这导致在正确的位置出现较大的空白。隐藏父元素而不是子元素为我解决了这个问题。

Answer 9

我遇到了这个问题，没有一个答案，没有帮助我，我通过以下方式解决了我的问题：

body { overflow-x: hidden; width: 100vw;}

Answer 10

我的答案是@scott Shelby答案的扩展。

通过更改文件的元数据，我能够摆脱右边烦人的白条：

<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" />

即使在更改元数据之后，由于移动设备中的表溢出，我仍然在桌子上看到白条。

要解决此问题，我确保使所有元素（例如图像，表单等）具有响应性。

对于图像，您可以使用class: "img-fluid"

对于表，您可以在父div中使用class: table-responsive。

Answer 11

我也有一个问题，一方面存在差距。很长一段时间后，我发现我没有遵循Bootstrap结构。你必须要小心。行不能包含容器；这也会引起间隙问题。所以：容器不能嵌套。行不能嵌套容器。行必须在容器中。

页面右侧的Twitter引导白色缺口

11 个答案: