如何在页面中添加多个导航栏

时间:2015-06-14 14:57:18

标签: twitter-bootstrap-3 navbar

我正在构建一个CMS编辑器,其中一个可以自定义的东西是Navbar中出现的文本。我在显示两个Navbars时遇到问题。我见过的大多数例子是一个在另一个之下的多个导航栏,而不是我需要的。

我需要第一个Navbar成为编辑器自己的Navbar,而第二个Navbar位于第一个Navbar下方但不在其下方。

enter image description here

1 个答案:

答案 0 :(得分:1)

您必须从第二个导航

中删除navbar-fixed-top

html会是这样的

    <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">

   <a class="brand" href="#">Project name</a>
    <div class="nav-collapse collapse">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
        </div><!--/.nav-collapse -->
        </div>
     </div>
   </div>

      <div class="container">

  <h1>Conent</h1>
  <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>

   </div> <!-- /container -->
   <div class="navbar ">
  <div class="navbar-inner">
    <div class="container">


  <div class="nav-collapse collapse">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
   </div><!--/.nav-collapse -->
   </div>
   </div>
    </div>

in bootply