首页 > bootstrap row 导致的页面出现滚动条?

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

我不懂为什么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改变了。

【热门文章】
【热门文章】