请前端高手指教，一个bootstrap的问题

全部话题移民创业 iOS Mac Objective-C Swift Android 招聘求职

由 tinyfool 发布于 2013年07月19日
无人欣赏。

整个这个站点，是用bootstrap构建的，参考的代码是 http://twitter.github.io/bootstrap/examples/hero.html，但是不知道什么时候开始，我发现，在手机设备上面，页面顶端会有莫名的空白两行。

在桌面浏览器上的话，如果拖小整体窗口的宽度，也会如此，但是我参考的bootstrap例子不会这样，我没看明白问题到底出在哪里，请不吝赐教，谢谢。

共6条回复

dragonshrim 回复于 2013年07月19日

2012-12-31.css里面的6761行有问题：

@media(min-width:980px){.nav-collapse.collapse { height: auto !important; overflow: visible !important } }

body { padding-top: 60px; }

把padding-top: 60px删掉就可以了。

turygo 回复于 2013年07月19日

2012-12-31.css中 body { padding-top: 60px; } 去掉这个就行了，这个不是默认的css，应该是你自己加上的把。。。。。

yxnino 回复于 2013年07月19日

不能删掉，应该把mediaquery代码放在正常的body后面，优先级的问题。 body{padding-top:60px;} @media (max-width: 979px) body { padding-top: 0; }

yopming 回复于 2013年07月19日

现在的body上面有一个padding-top:60px;的样式，而参照的页面会在@media (max-width: 979px)的时候修改成padding-top:0;。

再仔细看下，应该是样式被覆盖了，@media (max-width: 979px)的时候的样式应该是优先级更高，现在反而优先级低了。是把原来的responsive的样式直接复制过来了吧？

tinyfool 回复于 2013年07月19日

twitter上的 @mescode 兄弟给了一个解决方案，改变body 的 padding-top的位置，放到最前面，问题解决了

tinyfool 回复于 2013年07月19日

3楼、4楼的意思也是差不多的，谢谢，同时也谢谢其他人

请登录或者注册。