引導程序未按預期工作

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>