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

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

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

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

当前回答

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

改变你的第一行

.navbar.navbar-fixed-top

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

2015-06-18 22:04:10

其他回答

要处理菜单栏中的换行，在导航栏上应用id，如下所示:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

并在包含jquery后在头部添加这个小脚本，像这样:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

这样，主体的顶部填充就会自动调整。

2013-11-25 16:00:12

你所要做的就是

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

2014-08-13 02:13:23

问题在于navbar-fixed-top，它将覆盖你的内容，除非指定主体填充。这里提供的解决方案不能在100%的情况下工作。JQuery解决方案在页面加载后闪烁/移动页面，这看起来很奇怪。

对我来说，真正的解决方案不是使用navbar-fixed-top，而是使用navbar-static-top。

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>

2015-01-10 22:48:26

你的答案就在文件里

需要填充身体固定的导航条将覆盖你的其他内容，除非你在<body>的顶部添加padding。尝试您自己的值或使用下面的代码片段。提示:默认情况下，导航栏的高度为50px。 Body {padding-top: 70px;｝确保在核心引导CSS之后包含它。

在Bootstrap 4文档中…

固定导航条使用位置:固定，意味着它们从 DOM的正常流程，可能需要自定义CSS(例如，填充顶部上)，以防止与其他元素重叠。

2012-06-20 17:19:46

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

改变你的第一行