Bootstrap：修复导航栏顶部

-4

尝试了一切，以使导航栏修复到bootstrap的顶部，但没有任何效果。我已经试过position : relative和position : absolute。任何帮助感谢！Bootstrap：修复导航栏顶部

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

来源

2017-08-25 Hritik Gupta

删除'风格=“的margin-top： 2vw; margin-right：3vw;位置：固定;“'不起作用？” –

没有。它没有 –

检查https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/。这个证明相同。 –

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;">相反，扩展现有的类.navbar-fixed-top在自定义的CSS文件，或者包括在<head>部分CSS。

希望这有助于。

来源

2017-08-25 12:59:19

重新阅读代码，我也试过了！ –

它没有。但无论如何，谢谢，我已经尝试了所有这些。 –

好吧，我已经为您提供了详细的解决方案/解释和基于此解决方案的全功能页面。你有什么想要达到的目标，以及它与现有的解决方案有什么不同，有点不清楚。如果您可以为您的问题增加更多清晰度，那么可以根据明确的要求对解决方案进行定制。无论如何，祝你的项目好运。最好的rgds， –

不太明白您的完整例子，你想达到什么目的。

您的代码已经被固定在上面。也许部分中，您放置导航栏有一些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; 
}

安德烈

来源

2017-08-25 13:22:35 andrescpacheco

这就是为什么我提供了一个页面滚动的github回购链接。无法在此处描述整个代码。我认为，那里的CSS可能会造成一些问题，但不知道在哪里，因为我也尝试过调整 –

您提供的示例工作。所以不能帮助你进一步 – andrescpacheco

Bootstrap：修复导航栏顶部

回答

相关问题