导航栏不会留在 Bootstrap 网站中[关闭]答案

【问题标题】：Nav Bar won't stay put in Bootstrap site [closed]导航栏不会留在 Bootstrap 网站中[关闭]
【发布时间】：2015-09-26 16:51:02
【问题描述】：

我无法让本网站上的导航栏保持固定在顶部。我不知道我哪里出错了。你能告诉我是什么问题吗？

https://dl.dropboxusercontent.com/u/45419155/website/index3.html

【问题讨论】：

原因是因为不是使用第一个 div 作为行，而是将其更改为导航。它按照您编写代码的方式正常工作，查看网站上的示例，看看他们是如何做到的link
我这样做了，但我没有看到任何变化。当我滚动时，它仍然漂浮在屏幕上。能详细点吗？

标签： html twitter-bootstrap navigation navbar

【解决方案1】：

我刚刚检查过您使用错误的 Bootstrap 类来制作固定导航栏。

您的代码：

        <nav class="navbar navbar-default navbar-static-top">
            <ul class="sf-menu">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="events.html">Services</a> </li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="gallery.html">Gallery</a> </li>
            <li><a href="about.html">About Us</a> </li>
            <li><a href="events.html">Events </a> </li>
            </ul>
        </nav>

不要使用navbar-static-top，请使用navbar-fixed-top，这将解决您的问题。

问题已解决：

       <nav class="navbar navbar-default navbar-fixed-top">
            <ul class="sf-menu">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="events.html">Services</a> </li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="gallery.html">Gallery</a> </li>
            <li><a href="about.html">About Us</a> </li>
            <li><a href="events.html">Events </a> </li>
            </ul>
        </nav>

我已尝试对您的网站进行更改，效果很好。

【讨论】：

【解决方案2】：

您的导航栏由列表项 (li) 的无序列表 (ul) 组成。您的导航栏“固定”在顶部，因为您的 ul 具有如下所示的“sf-menu”类：

.sf-menu {
    position: fixed;
}

如果您希望导航栏相对于其余元素保持原位，我建议您更改或覆盖类“sf-menu”以读取position: relative。这将改变导航栏的外观，但您可以通过删除/覆盖 nav 元素中的“navbar-default”类来进行操作。

【讨论】：

是的！非常感谢。