Question

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

对于以下代码我使用express＆amp;玉 http://jade-lang.com 这有助于你编写html页面简单的方法......

我希望它像下面那样 http://getbootstrap.com/examples/jumbotron/ 而是项目名称，你会看到tab1＆amp; tab2等

更新了代码

目前，文字（标签1和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

Bootstrap导航栏不是预期的显示文本

1 个答案: