如何在同一页面上显示多个Twitter Bootstrap导航栏?

16

在一个页面上显示多个导航栏是否有可能? 我想将一个倒置的导航栏固定在顶部,然后在某些页面上,在它下方再加一个固定的导航栏作为附加信息头。

1个回答

13

当然可以有2个导航栏。您可能需要调整代码才能按照您的要求进行设置...

工作示例

<div class="navbar navbar-static-top navbar-inverse">
  <div class="navbar-inner">
    <a class="brand" href="#">Brand</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</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="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

我遇到的问题是,如果我将navbar-fixed-top应用于两个元素,第二个元素会在第一个元素的顶部(z轴)上方。 - Devin Goble
1
好的,我已经想出来了。我不确定这是否是最好的方法。http://bootply.com/61112 - Devin Goble
请关闭该线程,因为Bootply示例已不再可用。 - LinuxLuigi
2
Bootply的链接正常工作。我已经将代码添加到答案中。 - Carol Skelly

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接