42

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

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

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

4

12 回答 12

75

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

确实，行类是导致问题的原因，但那是因为它总是应该放置在容器元素内。

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

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

容器元素的左右边距通常为 -15px，而行类的左右边距为 15px。两者相互抵消。如果两者之一不存在，您将看到额外的空间。

于 2016-04-19T16:35:36.727 回答
49

你有没有尝试过：

html, body { overflow-x: hidden; }

你能发一个小提琴吗？

于 2013-10-23T23:27:06.193 回答
10

将以下元标记添加到您的 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 上

于 2013-05-23T02:53:01.897 回答
7

我有同样的问题。我发现导致创建填充的对象是 Bootstrap 的“行”类。

如果你添加

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

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

于 2015-09-06T18:27:31.397 回答
5

我有这个问题，没有一个答案，没有帮助我，我用这种方式解决了我的问题：

body { overflow-x: hidden; width: 100vw;}
于 2019-05-01T20:36:02.503 回答
1

通常会发生这种情况，因为您有一个 div 打破了您设置的容器宽度的边界，可能是一个 div 或部分填充、边距、定位..您可以使用检查器箭头或溢出：隐藏在容器标签上查看您可能会看到的部分有打破宽度。

于 2014-03-30T14:07:47.780 回答
1

我最近遇到了一个非常相似的问题，这让我花了很长时间才弄清楚。对我来说，这不是通常的行/容器问题。我正在使用 aform-control手动呈现复选框。在 Bootstrapform-control中，width:100% 默认情况下所有带有. 在线有许多复选框导致它们溢出（不可见）并导致右侧出现这个大的白色间隙。令人惊讶的是，使用 Chrome 开发工具进行调试也并不容易。

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

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

和

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

希望它可以帮助某人

于 2018-03-29T05:53:58.870 回答
0

此外，请检查您如何使用容器。它们不能嵌套，它们会导致问题。

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

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

于 2016-08-14T06:06:48.113 回答
0

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

于 2017-12-22T20:15:39.910 回答
0

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

于 2018-08-29T13:23:47.400 回答
0

我的回答是对@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"

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

于 2020-08-12T10:15:44.227 回答
0

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

于 2020-12-09T08:58:33.290 回答