导航栏不会留在 Bootstrap 站点

Question

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

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

Answer 1

您的导航栏由列表项 (li) 的未排序列表 (ul) 组成。您的导航栏 "fixed" 位于顶部，因为您的 ul 具有 class "sf-menu"，如下所示：

.sf-menu {
    position: fixed;
}

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

Answer 2

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

您的代码：

        <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-fixed-top 而不是 navbar-static-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>

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

导航栏不会留在 Bootstrap 站点

Nav Bar won't stay put in Bootstrap site

html

navigation

navbar

twitter-bootstrap