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＆amp;导航栏中的tab2并将到达文本放在灰色区域，我该怎么做？ enter image description here

更新

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

这是我在网址中调用的第二个文件/视图，并将到达数据放在页面

中

扩展布局

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

Answer 1

三件事：

尝试每个级别使用相同数量的缩进，例如制表符或例如四个空格。 html和head之间的缩进是四个字符，其中body和div之间有两个字符。保持这种一致性可以更清楚地说明哪个元素是哪个父元素的孩子。
内容不应该是导航的一部分。您可以通过更改第二个最后一行div.container的缩进来解决此问题，方法是将其与正文中的第一个div相同。在你的情况下，4 + 4 + 2 = 10个空格应该这样做。
block content应该是div.container的孩子，因为您希望内容包含在div.container中。为此，请给它四个额外的缩进空格，如下所示：
```
      div.container
          block content
```
div.container应该是nav元素的子元素。目前它存在于同一水平上。为了解决这个问题，你需要在nav之后给所有行添加一些额外的缩进（显然在3.中修复的那些除外）。

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

1 个答案: