我不懂为什么bootstrap要给.row设置一个
margin-right: -15px;
margin-left: -15px;
这样导致页面水平位置出现滚动条,如何在不影响全局的情况下消除呢?
因为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是认为栅格之间的确要有间距才美观,所以设置的吧。
如果不这样,列的间距就不好弄,会出现第一列和最后一列不能顶格。
把row放到container里面, 就ok了. 或者简单粗暴用overflow:hidden.
简单粗暴?
Overflow:hidden;
这时候在回答是不是晚了。。。
应该是你把.container或者.row的padding和margin修改过导致原bootstrap的css样式被你的样式覆盖不能自适应。你可以找找看比如你想增加padding:50px 0;只为了增加上下的距离,但是却不知不觉把左右的padding改变了。