Bootstrap 3.3.7“行”导致水平滚动条

Question

好吧好吧，我知道。这个问题已经问了很多。但是，到目前为止，我还没有找到可行的解决方案。我将页面简化为：

<div class="row">
    <div class="col-sm-12">
        stuff
    </div>
</div>

并且仍然有一个水平滚动条。在开发工具中，我可以找到row：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

如果我不单击鼠标margin-right: -15px;，问题就会消失。但是，在我的实际页面（包含所有内容）上，这又带来了另一个问题。该页面的页边距必须为零，但现在右边距为15px。

答案之一在这里伤心包装row用container-fluid。另一个说要把它包起来container。这些都使滚动条消失了，但是它们还给出了页边距，这是我所没有的。

我发现早在2013年就有讨论此问题的线程。这真的还没有解决吗？

我需要做什么？

另外：小提琴

https://jsfiddle.net/oLx4g8e3/1/

Answer 1

If someone is facing this in Bootstrap v4. Just add m-0 to your div.

<div class="row m-0"></div>

Answer 2

首先，如果您的部分是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>

小提琴

或者如果您正在使用 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>

小提琴

Answer 3

一种更简单的方法是简单地删除有问题的行上的边距：

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