Twitter Bootstrap页面右侧有白色间隙

Question

我在使用Twitter Bootstrap的响应式样式表时遇到了问题。网站显示正常，没有问题，但出现了响应式平板电脑和手机页面右侧的巨大白色间隙。不是滚动条问题，而是一个巨大的白色间隙。 http://i.imgur.com/JeRRRqq.png 我认为我并没有做太多改变。没有更改宽度或其他东西。在Chrome中检查对象，没有看到任何溢出宽度的情况。

- Lynx

Answer 1

这可能有些晚了，但我发现其他答案是误导的。

确实，row类是引起问题的原因，但这是因为它总是应该放在一个容器元素之内。

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

行必须放置在容器（固定宽度）或.container-fluid（全宽）中以进行适当的对齐和填充。

容器元素通常在右侧和左侧都有-15像素的填充，而row类在右侧和左侧都有15像素的填充。两者相互抵消。如果两者之一不存在，则会出现额外的空间。

- Nicola Pedretti

---

我的页面上的row都在container或者container-fluid中，但是右侧仍然有大片的白色空间。即使使用Chrome开发者工具也不能找出原因。这只发生在带有表单的页面上。有什么想法吗？ - Anupam

Answer 2

你尝试过：

html, body { overflow-x: hidden; }

你能贴一个 JSFiddle 吗？

- Giulio

---

我想通了。这与填充有关。 - Lynx

注意 Bootstrap 的 'row' 类以及 {margin-right: -15px}。这可能导致我的页面出现问题。 - JosephK

这解决了我的问题，但是Bootstrap的滚动监听停止工作了。 :/ - Gabriel Kunkel

对不起，我通常从不使用那个插件，而且我知道这个解决方案有些hack-ish。 - Giulio

/* 隐藏水平滚动条 */ .body、.head、.row、.col { overflow-x: hidden; } - Taylor D

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上

- Scott Selby

---

没有起作用...如果有帮助的话，可以缩小范围..在平板电脑（iPad）上只有大约20-30像素的间隙，在智能手机（Vivid）上则有大约50-60像素的间隙。 - Lynx

不知道，没有发布任何HTML或CSS代码，这些可能是最好的修复方法，我不能告诉你更多了。 - Scott Selby

是的，我明白了。但我希望我能够发布代码，但不行。我想我可以自己解决它，哈哈，再次感谢！ - Lynx

如果我不想要边距，因此使用container-fluid怎么办？ - haneulkim

回顾过去，2019年感谢2013年提供的这个meta标签帮助哈哈。 - caro

当我缩小页面宽度时，白色条形错误占据了我的页面，更改元数据解决了这个问题。 - Naman Bansal

Answer 4

我遇到了同样的问题。我发现导致填充出现的对象是Bootstrap的“row”类。

如果您添加

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

将此内容添加到您的CSS文件/行对象中，这应该至少解决您网页上的一个导致边距的问题。

- Jacob

---

行内边距是故意的。您应该将行包装在.container-fluid中。 - Andrew

Answer 5

我曾经遇到过这个问题，但是那些答案都没有帮助到我。最后，我通过如下方式解决了我的问题：

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

- Abolfazl Miadian

Answer 6

最近我遇到了一个非常相似的问题，花费了我相当长的时间才解决。对我来说，这不是常见的行/容器问题。我正在使用form-control手动渲染复选框。在Bootstrap中，所有带有form-control的文本元素默认都具有width:100%。。在线上有很多复选框会导致它们溢出（看不见），并在右侧造成大量白色间隙。令人惊讶的是，使用Chrome Dev工具进行调试也不容易。

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

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

和

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

希望能对某人有所帮助。

- Anupam

Answer 7

通常出现这种情况是因为您有一个div破坏了设置的容器宽度的边界，可能是div或section的填充，边距，定位...您可以使用检查器箭头或在容器标记上使用overflow:hidden来查看哪个部分会破坏宽度。

- Nicholas Newenham

Answer 8

我的答案是对@scott Shelby答案的补充。

我通过更改文件的meta信息，成功消除了右侧令人烦恼的白色条：

<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。

- Naman Bansal

Answer 9

/* Hide horizontal scrollbar */
.body, .head, .row, .col {
  overflow-x: hidden;
}

这样做可以让您拥有一个粘性导航栏，但仍然可以摆脱空白！

- Taylor D

Answer 10

我在移动设备上遇到了类似的问题。问题是我在较小的屏幕尺寸上隐藏了一个元素，但忘记了它的父容器。即使其内容为空，该容器仍然被渲染，导致右侧出现了一个大的白色间隙。将父元素而不是子元素隐藏解决了我的问题。

- AverageJoe