twitter-bootstrap Bootstrap 3.3.7“行”导致水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44687345/
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
Bootstrap 3.3.7 "row" causing horizontal scroll bar
提问by Casey Crookston
Ok ok, I know. This question has been asked a lot. But, so far, I have not found a working solution. I boiled my page down to nothing but this:
好吧好吧，我知道。这个问题被问了很多。但是，到目前为止，我还没有找到可行的解决方案。我将我的页面归结为以下内容：
<div class="row">
<div class="col-sm-12">
stuff
</div>
</div>
And there is still a horizontal scroll bar. In dev tools, I can find the row:
而且还有一个水平滚动条。在开发工具中，我可以找到row：
.row {
margin-right: -15px;
margin-left: -15px;
}
And if I un-click margin-right: -15px;then the problem goes away. But, on my actual page (with all of the content) this creates another problem. The page needs to have zero margins, but it now was a 15px margin on the right.
如果我取消点击，margin-right: -15px;那么问题就会消失。但是，在我的实际页面（包含所有内容）上，这会产生另一个问题。页面需要有零边距，但现在右边有 15px 的边距。
One of the answers heresad to wrap rowwith container-fluid. Another said to wrap it in container. Both of these did make the scroll bar go away, but they also give the page side margins, which I can't have.
这里的答案之一很难row用container-fluid. 另一个说要把它包起来container。这两个确实使滚动条消失了，但它们也给了页面边距，这是我不能拥有的。
I've found threadsdiscussing this as far back as 2013. Is this really not fixed yet?
我发现早在 2013 年就有讨论这个问题的线程。这真的还没有解决吗？
What do I need to do?
我需要做什么？
Also: Fiddle
还有：小提琴
回答by Ismail Farooq
First of all you don't need rowor col-*12classes if your section is 100% wide look at thisbootstrap example they have not taken any rowor col-*12neither with headernor jumbotron. If your section has column Just take row inside col-*classes for example
首先，如果您的部分是 100% 宽的，那么您不需要row或col-*12类，请查看此引导程序示例，他们没有row或col-*12没有使用header和jumbotron。如果您的部分有列只需在col-*类中取行例如
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
Or in case if you are using container-fluid
或者，如果您正在使用 container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
</div>
</div>
回答by Arsen Ablaev
If someone is facing this in Bootstrap v4.
Just add m-0to your div.
如果有人在 Bootstrap v4 中遇到这个问题。只需添加m-0到您的div。
<div class="row m-0"></div>
回答by aalaap
An easier way is to simply remove the margins on the offending row(s):
一种更简单的方法是简单地删除违规行上的边距：
.row {
margin-left: 0px;
margin-right: 0px;
}
回答by Robert Dewitt
Are you talking about a scrollbar appearing on the bottom of the page when the container is supposed to be fluid? There might be an element in your page that is extending the width of the screen.
您是在谈论当容器应该是流体时出现在页面底部的滚动条吗？您的页面中可能有一个元素正在扩展屏幕的宽度。
I usually use this Chrome extensionto see what CSS elements are extending farther than they should.
我通常使用这个 Chrome 扩展程序来查看哪些 CSS 元素超出了它们应该扩展的范围。
Also, see if this Fiddlehelps (code below).
另外，看看这个Fiddle 是否有帮助（下面的代码）。
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
Lorem Ipsum is simply dummied text of the printing and typesetting industry.
</div>
</div>
</div>
回答by Pascal Hannemann
Why dont you use a container-fluid and completely remove the margin ?
为什么不使用容器流体并完全去除边距？
<div class="container-fluid" style="margin: 0">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Or make your own div around it with width: 100%
或者在它周围创建自己的 div width: 100%
