推特引导导航栏固定顶部重叠的网站

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

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

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

当前回答

这个问题是已知的，在twitter引导站点中有一个解决方案:

当你添加导航栏时，记住要考虑隐藏区域在下面。为<body>添加40px或更多的填充。一定要加上它在核心引导CSS之后，在可选的响应之前 CSS。

这招对我很管用:

body { padding-top: 40px; }

2012-06-20 17:22:29

其他回答

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

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

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

2014-03-05 01:19:41

Bootstrap 3。+，我会使用以下CSS来修复导航栏-固定顶部和锚跳重叠的问题 https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

2014-12-06 08:42:56

在nav标签中使用这个类

Class ="navbar navbar-expand-lg navbar-light bg-light sticky-top"

自举4

2019-01-30 19:30:51

Bootstrap 4的解决方案，它在我所有的项目中都很完美:

改变你的第一行