twitter-bootstrap - 将 navbar-fixed-top 更改为 navbar-static-top 会在标题上方创建空白空间

标签 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">

先感谢您!

编辑:你们都摇滚!感谢您的快速响应、解释和修复。是你被困在简单的事情上让你发疯。哈哈。

最佳答案

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

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

我不确定你是否添加了它。但是,如果该 body 标签没有 80px 填充,那么当您将其设置为 navbar-fixed-top 时,您的内容实际上会在导航栏下方向上滑动。当您有一个固定的导航栏时,您需要为其保留一个分隔符,以便您的内容从导航栏下方开始,而不是实际隐藏在其下方。

如果您从 body 标签中删除填充,那么您应该很好地使用静态导航栏。

关于twitter-bootstrap - 将 navbar-fixed-top 更改为 navbar-static-top 会在标题上方创建空白空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25551904/

相关文章:

jquery - 根据屏幕尺寸禁用功能?

html - 导航栏延迟附加到顶部

HTML/CSS 不向左移动

css - 导航栏元素打开下拉菜单更改背景

css - 导航栏 Bootstrap 中的搜索栏宽度 + 偏移量

css - Bootstrap 导航栏显示垂直而不是水平

css - Bootstrap 图标未显示

html - 等于按钮输入的高度?

javascript - Bootstrap : scrollspy doesn't work after I've added smooth scrolling

javascript - 使用 jquery 操作 Bootstrap 导航栏元素