無法在導航欄中看到標籤文本

Question

在JADE中使用下面的代碼，我沒有看到導航欄中的標籤文本，這裏有什麼問題，我嘗試使用縮進播放，但沒有成功我猜測Im失去了一些東西basic.please協助

html 
    head 
     title= title 
     link(rel="stylesheet", href="bootstrap.min.css") 
     link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css') 
     script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') 
     body 
      div 
      nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation') 
      .container 
      .navbar-header 
       button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1') 
         span.sronly 
         span.icon-bar 
         span.icon-bar 
         span.icon-bar 
       #bs-example-navbar-collapse-1.collapse.navbar-collapse 
        ul.nav.navbar-nav 
        li 
        a(href='/recipes/bbq') Tab1 
        li 
        a(href='/recipes/bbq') Tab2 
        div.container 
        block content 

這裏是JS提琴http://jsfiddle.net/jo1nnrp4/3/

這觀點，我想看看在導航欄中TAB1 & TAB2，並把到來文本中的灰色區域，怎麼能我這樣做？

更新

html 
    head 
     title= title 
     link(rel="stylesheet", href="bootstrap.min.css") 
     link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css') 
     script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') 
    body 
     div 
      nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation') 
      .container 
      .navbar-header 
       button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1') 
         span.sronly 
         span.icon-bar 
         span.icon-bar 
         span.icon-bar 
       #bs-example-navbar-collapse-1.collapse.navbar-collapse 
        ul.nav.navbar-nav 
        li 
        a(href='/recipes/bbq') Tab1 
        li 
        a(href='/recipes/bbq') Tab2 
     div.container 
      block content 

這是第二個文件/視圖，我在url看漲和看跌的到來數據在頁面

延伸佈局

block content 
    .jumbotron 
    h1= title 
    ul 
     each flight, index in arrivals 
      - landed = new Date(flight.actualArrive) 
      li= flight.number + ': ' + flight.origin + '-' + landed 

Answer 1

三東西：

1. 嘗試使用相同數量的縮進每個級別，例如製表符或例如四個空格。 html和head之間的縮進是四個字符，其中兩個字符在body和div之間。保持這種一致性使得更清楚哪個元素是哪個父親的孩子。

2. 該內容不應該是導航的一部分。您可以通過更改第二行最後一行的縮進div.container來解決此問題，方法是將它與正文中的第一個div相同。在你的情況4 + 4 + 2 = 10個空格應該這樣做。

3. block content應該是div.container的孩子，因爲您希望內容包含在div.container中。要做到這一點給它縮進四個額外的空間是這樣的：

    div.container 
         block content 
   

4. 的div.container應該是nav元素的子元素。目前它存在於同一層。爲了解決這個問題，你需要在nav之後給出所有行（除了你明確固定的那些）。