我使用bootstrap3.3进行简单的计算,我的方式是:
为身体,html:
html,body{
background: #fff;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
然后在每个子节上我有以下代码:
.section-name{
height:100%;
}
以便每个部分占用给定设备屏幕大小的100%。现在我不知道为什么但是,每个部分之间有很大差距,请看下面的屏幕截图:
注意该部分之间的差距,继续另一个截图:
现在我去了开发工具,在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上,希望这是一个已知的问题,我可以得到帮助。
如有必要,我可以发布更多代码。随便问。
再次回应我的问题,我遇到了一些不需要的填充,边距问题(如附带的屏幕截图所示)。
编辑::
答案 0 :(得分:1)
如果你能提供一个小提琴,那就更好了,但是有时我需要做一些事情:
尝试检查上面的级别元素。
另外,你还在使用jumbotron吗?如果是这样,它会添加48px的顶部/底部填充(通过媒体查询),看一看。默认情况下,Bootstrap有许多类添加了不需要的填充和边距。
答案 1 :(得分:1)
我想我已经找到了你的.section名称中有h2的解决方案,其利润率为20px,
这里是js小提琴
.section-title {margin-top:0px;
}