twitter-bootstrap Twitter Bootstrap 3.0 行比窗口宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19613563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3.0 row wider than window
提问by Ronni Skansing
I was fiddling around with Twitter Bootstrap and noticed that my .rowwas wider than the screen length.
我在摆弄 Twitter Bootstrap 并注意到我的.row比屏幕长度还宽。
Here is the example
这是例子
When bootstrap 3.0 came out I did not experience this.
当 bootstrap 3.0 出来时，我并没有遇到这种情况。
The extra space on the right sides comes from margin-right: -15px;
右侧的额外空间来自 margin-right: -15px;
I have been glaring at this for hours without making any progress on why or how I am fooling myselfand 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%
我确定我错过了显而易见的事情。我想了解为什么这个空间超出了窗口宽度（强制滚动）以及如何避免它。我认为一行会匹配 100%
回答by Ben
The correct solution (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) is to use the container-fluidclass on the surrounding div:
正确的解决方案（https://getbootstrap.com/docs/3.3/css/#grid-example-fluid）是container-fluid在周围的 div 上使用该类：
<div class="container-fluid">
<div class="row">
Content
</div>
</div>
回答by Anees
I fixed it by just removing margin-left & margin-right from .row in bootstrap and also by setting it's width to 100%
我通过在引导程序中从 .row 中删除 margin-left 和 margin-right 并将其宽度设置为 100% 来修复它
回答by Ronni Skansing
EDIT >>
编辑 >>
This was the previously accepted answer. Undeleted if anyone sites with a old version.
这是以前接受的答案。如果有人使用旧版本的网站，则取消删除。
EDIT <<
编辑<<
It is a bug
这是一个错误
Which seems to have been unfixed for while. Maybe a proper fix in 3.1.
这似乎已经有一段时间没有修复了。也许在 3.1 中有一个适当的修复。
Best suggestion seems to be "overflow-x: hiddenon bodyelement.
最好的建议似乎是"overflow-x: hidden关于body元素的。
https://github.com/twbs/bootstrap/issues/10711
https://github.com/twbs/bootstrap/issues/10711
Other than that they added/clarified some of it in this commit
除此之外，他们在此提交中添加/澄清了其中的一些内容
Especially this line "Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px;to offset the margin: 0 -15px;used on .row"
尤其是这一行“希望创建完全流畅的布局（意味着您的网站延伸视口的整个宽度）的人们必须将他们的网格内容包装在一个包含元素中，padding: 0 15px;以抵消margin: 0 -15px;使用的内容.row”
回答by Code Monkey
Your rows need to be placed inside a div with the container class applied.
您的行需要放置在应用了容器类的 div 中。
For example
例如
<div class="container">
<div class="row">
Content
</div>
</div>
