我有以下代码，如果我将两个导航栏都保持静态，它似乎可以工作:
<html>
<head>
<link href="./static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="./static/css/main.css" rel="stylesheet">
<link href="./static/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body >
<div class="bothnavbars">
<nav class="navbar navbar-default navbar-static-top nav1" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></span> Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Sub menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- ./container-fluid -->
</nav>
<nav class="navbar navbar-default navbar-static-top nav2" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Sub menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- ./container-fluid -->
</nav>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<div class="blockcontent">
Content
</div>
</body>
</html>
我在main.css中添加的css是:
.nav1 {
margin-bottom:10;
}
.nav2 {
top:0;
}
.blockcontent{
padding-top: 180px;
}
现在，如果我想让两个导航栏都固定在顶部，我会更改
<nav class="navbar navbar-default navbar-static-top nav1" role="navigation">
到
<nav class="navbar navbar-default navbar-fixed-top nav1" role="navigation">
与 nav2 相同。我将 nav2 类更改为类似
.nav2 {
top:60;
}
现在页面看起来不错，但是当我缩小浏览器大小并单击按钮查看菜单时，第一个导航栏无法正常工作。有什么解决办法吗？
最佳答案
你遇到的问题是 navbar-fixed-top 将 left 和 right 位置都声明为 0，所以实际上第二个导航是与第一个重叠，因为它占据了屏幕的整个宽度。
要解决它，请添加以下代码:
HTML
<div class="bothnavbars">
<div class="navbar navbar-default navbar-fixed-top nav1">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top nav2">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
<div class="blockcontent">
Content
</div>
和 CSS:
.nav1 {
position:fixed; top:60; width:50%; left:0; right:50% !important
}
.nav2 {
position:fixed; top:60; right:0; width:50%; left:50% !important
}
我已经更改了你的 HTML 代码，因为它也有错误，所以我包含了一些易于查看的 HTML，这样你就可以看到它是如何工作的，并根据需要进行替换，你可以看到 Bootply sample here
对于一个堆叠在另一个之上的导航，将给定的 CSS 更改为:
/* CSS used here will be applied after bootstrap.css */
.nav1 {
position:fixed; top:0;
}
.nav2 {
position:fixed; top:50px; background:#fc0
}
@media handheld, only screen and (max-width: 767px) {
.nav1, .nav2{position:relative; top:0}
.nav2{top:-20px;}
}
参见 Bootply (注意:添加背景色是为了可视化目的，但当然不是必需的)
关于css - Bootstrap 3 : Two collapsable navabrs with fixed-top?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27988582/