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

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

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

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

当前回答

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

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

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

其他回答

我会这样做:

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

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

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

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

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

编辑-这工作得更好:

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

正如其他人所说，在身体上加一个衬垫非常有用。但是当你把屏幕调窄(和手机宽度一样)时，导航栏和机身之间就会有一个间隙。此外，拥挤的导航栏可以被包装成多行栏，再次覆盖一些内容。

这为我解决了这些问题

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

这使得一个40px的默认填充和0px的宽度低于768px(根据bootstrap的文档是手机布局的分割，在那里将产生的差距)

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

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

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

你所要做的就是

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

推荐文章