Bootstrap：在顶部修复导航栏答案

【问题标题】：Bootstrap : Fixing navbar at topBootstrap：在顶部修复导航栏
【发布时间】：2018-02-03 12:54:45
【问题描述】：

尝试了一切以使导航栏在引导程序中固定到顶部，但没有任何效果。我已经尝试过position : relative 和position : absolute。任何帮助表示赞赏！

HTML：

    <section style="background-color: #E8E8EA">
    <nav class="navbar navbar-fixed-top" style="margin-top: 2vw; margin-right: 3vw; position: fixed;">
      <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" style="border-style: solid; border-width: 1px;"><span class="glyphicon glyphicon-search rt"></span>     Search</a></li>
            <li><a class="qt" href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>      About Us</span></a></li>
            <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>      Education</span></a></li>
            <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>      Consumer Service</span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger" style="border-radius: 50%; border-width: 1px; border-style: solid; padding: 5px; margin-top: -5px;"></span></a></li>
        </ul>
      </div>
    </nav>
</section>

CSS：

.nav.navbar-nav.navbar-right li a {
color: black;
background-color: transparent;
}

编辑：在页面中实现了这一页滚动：https://github.com/peachananr/onepage-scroll

【问题讨论】：

删除 style="margin-top: 2vw; margin-right: 3vw; position: fixed;" 不起作用？
不。它没有
检查getbootstrap.com/docs/3.3/examples/navbar-fixed-top。这也证明了这一点。
你想在哪里修复导航栏？到窗口顶部还是部分顶部？不太明白为什么在不需要的时候把它放在一个部分中。
在 Bootstrap 4 中它只是 fixed-top。为什么要使用相对和绝对？

标签： html css bootstrap-4

【解决方案1】：

navbar-fixed-top 应该完成这项工作（您的附加声明 position: fixed; 是多余的，应该删除）。例如，请参阅使用 Bootstrap CSS 实现所需功能的网页：www.alexanderbell.us。对应的逐字HTML：<nav class="navbar navbar-default navbar-fixed-top bg-grey-dark">（bg-grey-dark是自定义类设置背景，可以排除，因为它与定位无关）。

另外说明：更好的做法是避免在您的案例中显示内联样式（即style="margin-top: 2vw; margin-right: 3vw; position: fixed;">。相反，在您的自定义 CSS 文件中扩展现有类 .navbar-fixed-top，或在<head> 部分。

希望这会有所帮助。

【讨论】：

好吧，我已经为您提供了详细的解决方案/说明以及基于此解决方案构建的全功能页面。有点不清楚您到底想要实现什么，以及它与现有解决方案有何不同。如果您可以使您的问题更加清晰，那么可以根据明确的要求定制解决方案。无论如何，祝你的项目好运。最佳 rgds，

【解决方案2】：

不太了解您的完整示例以及您要达到的目标。

您的代码已固定在顶部。可能您放置导航栏的部分有一些您不希望看到的 css。

这是一个工作示例：

https://jsfiddle.net/L1eczuno/

HTML：

<nav class="navbar navbar-fixed-top" style="margin-top: 2vw; margin-right: 3vw; position: fixed;">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#" style="border-style: solid; border-width: 1px;"><span class="glyphicon glyphicon-search rt"></span>     Search</a></li>
        <li><a class="qt" href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>      About Us</span></a></li>
        <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>      Education</span></a></li>
        <li><a href="#"><span class="strike"><span class="glyphicon glyphicon-minus"></span>      Consumer Service</span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger" style="border-radius: 50%; border-width: 1px; border-style: solid; padding: 5px; margin-top: -5px;"></span></a></li>
    </ul>
  </div>
</nav>

 <div id="test" class="jumbotron" style:"padding-top:30px">
    <h1>Twitter Bootstrap 3.0</h1>
    <p class="lead">Starter template with CSS and JS included.</p>
    <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
  </div>

CSS：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
#test {
    margin-top: 87px;
    height: 2000px;
}

安德烈

【讨论】：

这就是为什么我提供了指向 github 存储库的链接以进行一页滚动。不可能在这里描述整个代码。我认为，那里的 CSS 可能会产生一些问题，但不知道在哪里，因为我也尝试过调整
您提供的示例有效。所以不能帮助你进一步