Bootstrap 导航栏未按预期显示文本

Question

我正在使用 Node.js 并希望使用带有一些按钮和文本的导航栏来单击和导航 问题是按钮和文本没有显示在导航栏中，你在下面看到它们， 我在这里做错了什么？

对于以下代码，我使用 express & jam http://jade-lang.com 帮助您编写html页面的方法很简单...

我希望它像下面那样 http://getbootstrap.com/examples/jumbotron/ 取而代之的是项目名称，您将看到 tab1 & tab2 等

更新代码

目前文本（tab1&2）不显示为导航栏的一部分 应该怎么改？

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')

        nav.navbar.navbar-default(role='navigation')
           .container-fluid
               .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
                   a.navbar-brand(href='/#
               #bs-example-navbar-collapse-1.collapse.navbar-collapse
                   ul.nav.navbar-nav
                       li
                           a(href='/recipes/1') Tab1
                       li
                           a(href='/recipe2') Tab3
                   body        
                   div.container
                   block content

Answer 1

嵌套元素要求您正确缩进。您还可以在元素上使用.class-name 应用类。

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
        nav.navbar.navbar-default(role='navigation')
           .container-fluid
               .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
                   a.navbar-brand(href='/#') Node Recipes
               #bs-example-navbar-collapse-1.collapse.navbar-collapse
                   ul.nav.navbar-nav
                       li
                           a(href='/recipes/bbq') Tab1
                       li
                           a(href='/recipes/bbq') Tab2