我在我的网站上使用bootstrap,我有导航栏固定顶部的问题。当我只是使用常规导航栏时,一切都很好。然而,当我尝试将它切换到导航栏固定顶部时,网站上的所有其他内容都向上移动,就像导航栏不存在一样,导航栏重叠了它。以下是我的基本思路:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

我试图复制bootstrap的例子,但仍然有这个问题,只有当使用导航栏固定顶部。我做错了什么?


当前回答

这对我来说很有效,看起来也不错。

<body class="pt-5 mt-4">....</body>

其他回答

我把这个放在屈服容器之前:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

我喜欢这种方法,因为它记录了需要让它工作的黑客,而且它也适用于移动导航。

编辑-这工作得更好:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

我只是包装了导航栏在一个

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

没有什么花哨的把戏,但它奏效了。

进一步Nick Bisby的回答,如果你在rails中使用HAML遇到这个问题,并且你应用了Roberto Barros的修复:

我将“bootstrap_and_override .css”中的require替换为: =需要twitter-bootstrap-static / bootstrap.css.erb

(参见https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)

... 你需要把CSS正文放在require语句之前,如下所示:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

如果require语句在CSS正文之前,它将不会生效。

我会这样做:

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

这将确保导航块不会向下延伸并覆盖页面内容。

一个更方便的解决方案供您参考,它在我所有的项目中都完美无缺:

改变你的第一行

.navbar.navbar-fixed-top

to

.navbar.navbar-default.navbar-static-top