bootstrap row 导致的页面出现滚动条？

Question

我不懂为什么bootstrap要给.row设置一个

    margin-right: -15px;
    margin-left: -15px;

这样导致页面水平位置出现滚动条，如何在不影响全局的情况下消除呢？

Answer 1

因为bootstrap栅格的正确用法是：

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

row（.row）必须位于container的内部，column（如.col-md-6）必须位于row的内部。如果按照这样的用法，就没有问题了。

这是一个类似齿轮啮合的搭配，有一篇精妙的文章The Subtle Magic Behind Why the Bootstrap 3 Grid Works讲解了这些边距的设计的意义。

我个人来看的话，bootstrap是认为栅格之间的确要有间距才美观，所以设置的吧。

Answer 2

简单粗暴?
Overflow:hidden;

Answer 3

如果不这样，列的间距就不好弄，会出现第一列和最后一列不能顶格。

Answer 4

这时候在回答是不是晚了。。。
应该是你把.container或者.row的padding和margin修改过导致原bootstrap的css样式被你的样式覆盖不能自适应。你可以找找看比如你想增加padding：50px 0;只为了增加上下的距离，但是却不知不觉把左右的padding改变了。

Answer 5

把row放到container里面, 就ok了. 或者简单粗暴用overflow:hidden.

Answer 6

第一种方案是把row放到.container里面，这也是官方推荐的，这也是row为什么要设置margin:-15px，是为了抵消掉container的padding,
第二种方案，在row外面包裹一层div，给这个div设置padding:0px 15px;从而抵消掉row的margin