将navbar-fixed-top更改为navbar-static-top会在标题上方创建空白区域

时间:2014-08-28 14:54:09

标签: twitter-bootstrap navbar

相关网页位于:http://deancraneproperties.com/rental-property-calculator/

将标题类从navbar-fixed-top更改为navbar-static-top时,会在标题上方创建一个80像素的空白区域。当然,我可以通过将margin-top设置为-80px来解决这个问题,但我想知道是否有人解释为什么会出现这种情况,或者有更好的修复方法。

这是有问题的html:

<header id="header" class="navbar navbar-inverse navbar-fixed-top" role="banner">

提前谢谢!

编辑:Y&#39;全是摇滚!感谢您的快速回复,解释和修复。你抓住的简单事情会让你发疯。洛尔。

3 个答案:

答案 0 :(得分:5)

所以这是因为整个页面的body标签的填充为80px。

<body class="page page-id-381 page-template-default">

我不确定你是否添加了它。但是,如果该主体标签没有80px填充,那么当您将其设置为navbar-fixed-top时,您的内容实际上会在导航栏下滑动。当你有一个固定的导航栏时,你需要为它留一个间隔,这样你的内容就会从导航栏下面开始,实际上并没有隐藏在它下面。

如果你从身体标签上移除了填充物,那么你最好使用静态导航栏。

答案 1 :(得分:3)

body元素有80px的padding-top。删除它,它将解决问题。

当导航栏固定时,它不在正常文档流中,并且导航栏会忽略填充(但其余的非固定元素会被填充向下推,以便为固定导航栏腾出空间,是padding-top:80px;应用于身体的整个点,但是当它不固定时,导航栏将成为文档流的一部分,并被身体的填充向下推。

答案 2 :(得分:1)

我不知道您是否因为意图而这样做,但是当您使用fixed元素时,它会占据您内容的整个宽度和浮动顶部,除非您提供z-index,因为您的标题已开启将标题下方的下一个内容放在顶部以使其显示在填充顶部下方将有助于您实现它。

padding-top:80px;

中删除body