引导程序未按预期工作

Question

我使用twitter引导程序为node.js UI，以下HTML是我使用Jade后得到的内容 我想要的是使用jumbotroon http://getbootstrap.com/examples/jumbotron/并将标签页设置为1 & 2在导航栏上的项目名称的同一行中，并使用链接中的黑色，我尝试了很多东西，我在这里做错了什么？

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button> 
 
    </div> 
 
    <a class="navbar-brand" href="/#"> 
 
         Node Rec 
 
    </a> 
 
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> 
 
      <a href="/recipes/b1"> 
 

 
            Tab1 
 

 
           </a> 
 
     </li> 
 
     <li> 
 
      <a href="/recipes/b1"></a> 
 
     </li> 
 
     </ul> 
 
     <div class="container"></div> 
 
     <div class="jumbotron"></div> 
 
     <h1> 
 

 
          List Arrivals 
 

 
         </h1> 
 
     <ul> 
 
     <li> 
 

 
      33: LAX-Tue Dec 02 2014 16:04:41 
 

 
     </li> 
 
     <li> 
 

 
      13: MKE-Tue Dec 02 2014 16:05:48 
 
     </li> 
 
     <li></li> 
 
     <li></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

这是怎么看起来像现在......

当我将其更改为导航栏，逆我得到了相反这是不一样的

jumbotron look

Answer 1

这可能是一个开始。我已经移动了<nav>以外的jumbotron。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button> 
 
    </div> 
 
    <a class="navbar-brand" href="/#"> 
 
         Node Rec 
 
    </a> 
 
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> 
 
      <a href="/recipes/b1">Tab1</a> 
 
     </li> 
 
     <li> 
 
      <a href="/recipes/b1">Tab2</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="jumbotron"> 
 
    <h1> 
 

 
          List Arrivals 
 

 
         </h1> 
 
    <ul> 
 
     <li> 
 

 
     33: LAX-Tue Dec 02 2014 16:04:41 
 

 
     </li> 
 
     <li> 
 

 
     13: MKE-Tue Dec 02 2014 16:05:48 
 
     </li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</div>