无法在导航栏中看到标签文本

Question

我在 JADE 中使用以下代码，但在导航栏中看不到标签文本，这可能是什么问题，我尝试使用缩进但没有成功我想我缺少一些基本的东西。请协助

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 fiddle 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 之后的所有行添加一些额外的缩进（显然在 3. 中修复的行除外）。