不需要的填充,bootstrap3.3中的边距

时间:2015-01-21 12:59:01

标签: html css twitter-bootstrap-3

我使用bootstrap3.3进行简单的计算,我的方式是:

为身体,html:

html,body{
    background: #fff;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

然后在每个子节上我有以下代码:

.section-name{
    height:100%;
}

以便每个部分占用给定设备屏幕大小的100%。现在我不知道为什么但是,每个部分之间有很大差距,请看下面的屏幕截图:

gap between section

注意该部分之间的差距,继续另一个截图:

gap between section

现在我去了开发工具,在mozilla和chrome中,检查了任何过多的填充或边缘问题,但没有找到。

然后我检查是否是因为我的html中的空格,取消了空白,但仍然不是问题。

实际上我也取消了所有的bootstrap cdn,只是为了检查它是否是一个引导问题而且不是,即使在我写的自定义css中,同样的问题仍然存在。

我甚至尝试过:

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

即便这样也不会取消填充

我发布这个在SO上,希望这是一个已知的问题,我可以得到帮助。

如有必要,我可以发布更多代码。随便问。

再次回应我的问题,我遇到了一些不需要的填充,边距问题(如附带的屏幕截图所示)。

编辑::

Js fiddle depicting my problem

2 个答案:

答案 0 :(得分:1)

如果你能提供一个小提琴,那就更好了,但是有时我需要做一些事情:

尝试检查上面的级别元素。

另外,你还在使用jumbotron吗?如果是这样,它会添加48px的顶部/底部填充(通过媒体查询),看一看。默认情况下,Bootstrap有许多类添加了不需要的填充和边距。

答案 1 :(得分:1)

我想我已经找到了你的.section名称中有h2的解决方案,其利润率为20px,

这里是js小提琴

.section-title {margin-top:0px;}

http://jsfiddle.net/u2ttpkhg/1/