Twitter Bootstrap 3.0 行比窗口宽答案

【问题标题】：Twitter Bootstrap 3.0 row wider than windowTwitter Bootstrap 3.0 行比窗口宽
【发布时间】：2020-09-26 03:03:36
【问题描述】：

我正在摆弄 Twitter Bootstrap，发现我的 .row 比屏幕长度宽。

这里是example

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

右侧多余的空间来自margin-right: -15px;

我一直盯着这个问题看了好几个小时，我为什么或如何自欺欺人并没有取得任何进展，而且搜索也没有帮助。

我确定我错过了显而易见的事情。我想了解为什么这个空间超出了窗口宽度（强制滚动）以及如何避免它。我以为一行会匹配 100%

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我只是通过在引导程序中从 .row 中删除 margin-left 和 margin-right 并将其宽度设置为 100% 来修复它

【讨论】：

【解决方案3】：

编辑>>

这是以前接受的答案。如果有旧版本的网站，则取消删除。

编辑

这是一个错误

这似乎已经有一段时间没有修复了。也许在 3.1 中得到了适当的修复。

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

除此之外，他们在commit 中添加/澄清了其中的一些内容

尤其是这一行 “希望创建完全流畅的布局（意味着您的网站会拉伸视口的整个宽度）的人们必须将其网格内容包含在包含 padding: 0 15px; 的元素中，以抵消上面使用的 margin: 0 -15px; .row"

【讨论】：

【解决方案4】：

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

例如

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

【讨论】：

【解决方案5】：

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

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

【讨论】：