Twitter Bootstrap 3.0比窗口宽

Question

我正在摆弄Twitter Bootstrap并注意到我的.row比屏幕长度宽。

以下是example

当bootstrap 3.0问世时，我没有遇到过这种情况。

右侧的额外空间来自margin-right: -15px;

我一直瞪着这几个小时没有取得任何进展为什么或如何欺骗自己 并且搜索没有任何帮助。

我确信我错过了显而易见的事实。我想了解为什么窗口宽度以外的空间（强制滚动）以及如何避免它。我以为一行会匹配100％

Answer 1

正确的解决方案（https://getbootstrap.com/docs/3.3/css/#grid-example-fluid）是使用周围div的container-fluid类：

<div class="container-fluid">
  <div class="row">
    Content
  </div>
</div>

Answer 2

我通过删除margin-left＆amp; margin-right from .row in bootstrap，并将其宽度设置为100％

Answer 3

编辑＆gt;＆gt;

这是之前接受的答案。如果任何人使用旧版本的网站，则取消删除。

编辑＆lt;＆lt;

这是一个错误

这似乎一直没有固定。也许3.1中的正确修复。

"overflow-x: hidden元素上的最佳建议似乎是body。

https://github.com/twbs/bootstrap/issues/10711

除此之外，他们在此commit

中添加/澄清了部分内容

特别是此行“想要创建完全流畅布局的人（意味着您的网站会拉伸视口的整个宽度）必须将其网格内容包装在包含padding: 0 15px;的包含元素中以抵消{{1在margin: 0 -15px;“

上使用

Answer 4

您的行需要放置在应用了容器类的div中。

例如

<div class="container">
    <div class="row">
        Content
    </div>
</div>

Answer 5

我通过选择特定的行来解决此问题，只有一行可以扩大页面的宽度，并删除页边距。

footer .row {
 margin-left: 0px !important;
 margin-right: 0px !important;
}