twitter-bootstrap Twitter Bootstrap 3 中的多个固定顶部导航栏标题无法正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28041834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple fixed top navbar headers in Twitter Bootstrap 3 not working properly?
提问by User2413
html :
html :
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand logo"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">Item1</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about">Item2</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#contact">Item3</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#contact">Item4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse main-nav">
<ul class="nav navbar-nav">
<li>
<a href="#">it1d</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about">it2d</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
</div>
</div>
</div>
<!-- FOOTER -->
<div style="clear: both"></div>
css:
css：
body {
padding-top: 50px;
}
.navbar-static-top{
position: fixed;
right: 0;
left: 0;
z-index: 1000;background: #ccc;
}
click here : http://www.bootply.com/101069
点击这里：http: //www.bootply.com/101069
In the above code i am using two navbars which i want to be fixed at the top of the page.so above code works fine for desktop and laptops but when seen in mobile.the first navbar is fix and second navbar is coming down. so what i need to do to fix both the navbars at the top in both desktops and mobiles??any help would be appreciated??
在上面的代码中，我使用了两个导航栏，我想将它们固定在页面顶部。所以上面的代码适用于台式机和笔记本电脑，但在移动设备中看到时。第一个导航栏已修复，第二个导航栏正在下降。那么我需要做些什么来修复台式机和手机顶部的导航栏？？任何帮助将不胜感激？
回答by Guillaume
You used navbar-static-topfor your second navbar. You have to use navbar-fixed-topfor both navbars so they stay at the top of the page when you scroll. You will also have to add some space (equal to the height of the first navbar) from the top for the second navbar (equal to the height of the first navbar) to avoid overlapping, like this: top:50px;Here is an update of your code on Bootply: http://www.bootply.com/Xd04ROsODx
您用于navbar-static-top第二个导航栏。您必须同时使用navbar-fixed-top两个导航栏，以便在您滚动时它们会停留在页面顶部。您还必须从顶部为第二个导航栏（等于第一个导航栏的高度）添加一些空间（等于第一个导航栏的高度）以避免重叠，如下所示：top:50px;这是您的代码的更新Bootply：http: //www.bootply.com/Xd04ROsODx
