我在我的网站上使用bootstrap并且导航栏固定顶部有问题 . 当我只使用常规导航栏时,一切都很好 . 但是,当我尝试将其切换到导航栏固定顶部时,网站上的所有其他内容都会向上移动,就像导航栏不在那里而导航栏重叠一样 . 这基本上是我如何摆脱它:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图准确复制bootstraps示例,但只有在使用navbar固定顶部时才会出现此问题 . 我究竟做错了什么?
16 回答
你的回答是正确的docs:
并在 Bootstrap 4 docs...
正如其他人所说的那样,在身体上添加填充物效果很好 . 但是当你使屏幕更窄(手机宽度)时,导航栏和机身之间存在间隙 . 此外,拥挤的导航栏可以换行到多行条,再次覆盖部分内容 .
这为我解决了这些问题
这默认为40px填充,宽度低于768px时为0px(根据bootstrap的文档是手机布局截止,将创建间隙)
一个更方便的解决方案供您参考,它在我的所有项目中都很完美:
改变你的第一行
至
这个问题是众所周知的,并且twitter bootstrap网站中有一个解决方法:
这对我有用:
@Ryan,你是对的,硬编码高度将使它在自定义导航栏的情况下工作不好 . 这是我为BS 3.0.0愉快地使用的代码:
我把它放在yield容器之前:
我喜欢这种方法,因为它记录了使其工作所需的黑客,而且它也适用于移动导航 .
编辑 - 这效果更好:
问题在于navbar-fixed-top,除非指定body-padding,否则它将覆盖您的内容 . 此处未提供解决方案适用于100%的情况 . 页面加载后,JQuery解决方案会闪烁/移动页面,这看起来很奇怪 .
对我来说真正的解决方案是不使用navbar-fixed-top,而是使用navbar-static-top .
所有以前的解决方案都以一种方式或另一种方式将40像素硬编码到html或CSS中 . 如果导航栏包含不同的字体大小或图像,该怎么办?如果我有充分的理由不首先搞乱 body 填充怎么办?我一直在寻找这个问题的解决方案,这就是我想出的:
您可以通过调整“1”来上移或下移 . 无论在调整大小之前和之后导航栏中的内容大小,它似乎对我有用 .
我很好奇其他人对此的看法:请分享你的想法 . (它将被重构为不重复,顺便说一下 . )除了使用jQuery之外,还有其他原因不能以这种方式解决问题吗?我甚至使用这样的辅助导航栏:
PS:上面是在Bootstrap 2.3.2上 - 它会在3.x中工作只要通用类名仍然存在......实际上它应该独立于bootstrap工作,对吧?
编辑:这是一个完整的jquery函数,处理动态大小的两个堆叠,响应式固定导航栏 . 它需要3个html类(或者可以使用id):user-top,admin-top和contentwrap:
正如我在一个类似的问题中发布的那样,我在真正的固定导航栏之前创建了一个虚拟的非固定导航栏,取得了很大的成功 .
所有屏幕尺寸的间距都很大 .
要处理菜单栏中的包装线,请将id应用于导航栏,如下所示:
在包含jquery之后将这个小脚本添加到头部,如下所示:
这样,身体的顶部填充会自动调整 .
Bootstrap 4的解决方案,它的工作原理在我的所有项目中都很完美:
改变你的第一行
至
Bootstrap documentation reference
关于他们这样做的时间:D
对于Bootstrap 3.,我将使用以下CSS来修复navbar-fixed-top和基于https://github.com/twbs/bootstrap/issues/1768的锚跳转重叠问题
你所要做的就是
继Nick Bisby的回答之后,如果你在rails中使用HAML遇到这个问题并且你在这里应用了Roberto Barros的修复:
(见https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
...你需要把身体CSS before 的require语句如下:
如果require语句在body CSS之前,它将不会生效 .
我会这样做:
这应该确保导航块不会向下延伸并覆盖页面内容 .
我把导航栏包裹起来了
没有花哨的hocus pocus,但它的工作..