32

I was fiddling around with Twitter Bootstrap and noticed that my .row was wider than the screen length.

Here is the example

When bootstrap 3.0 came out I did not experience this.

The extra space on the right sides comes from margin-right: -15px;

I have been glaring at this for hours without making any progress on why or how I am fooling myself and searching has not been helpful.

I'm sure I am missing the obvious. I would like to understand why there is this space beyond the window width (forcing a scroller) and how to avoid it. I thought that a row would match 100%

4

5 回答 5

48

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

<div class="container-fluid">
  <div class="row">
    Content
  </div>
</div>
于 2014-05-12T18:41:54.713 回答
8

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

于 2014-06-04T04:07:22.160 回答
7

编辑>>

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

编辑 <<

这是一个错误

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

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

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

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

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

于 2013-10-27T01:35:21.900 回答
4

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

例如

<div class="container">
    <div class="row">
        Content
    </div>
</div>
于 2013-10-27T01:00:20.633 回答
0

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

footer .row {
 margin-left: 0px !important;
 margin-right: 0px !important;
}
于 2020-09-25T19:03:36.803 回答