Question

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

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

Answer 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>

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

Answer 2

您的导航栏由列表项（ul）的无序列表（li）组成。您的导航栏已修复＆＃34;因为你的ul有类＆＃34; sf-menu＆＃34;看起来像这样：

.sf-menu {
    position: fixed;
}

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

导航栏不会留在Bootstrap站点

2 个答案: