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 

을 지원 basic.please없는 일이 어떻게,이, 나는 탐색 모음에서 TAB1 & TAB2을보고 회색 영역에 도착 텍스트를 넣어보기 원하는됩니다 JS 바이올린 http://jsfiddle.net/jo1nnrp4/3/

입니다 내가 그랬어?

는 업데이트

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. 레벨 당 동일한 양의 들여 쓰기 (예 : 탭 문자 또는 예 : 4 공백)를 사용해보십시오. html과 head 사이의 들여 쓰기는 4 자이며, 두 문자는 body과 div 사이입니다. 일관성을 유지하면 어떤 요소가 부모의 자식인지 명확하게 알 수 있습니다.

2. 콘텐츠는 탐색의 일부가 아니어야합니다. 두 번째 마지막 줄의 들여 쓰기를 변경하여 div.container의 첫 글자와 동일한 수준으로 몸체의 div을 지정하여이 문제를 해결할 수 있습니다. 귀하의 경우에는 4 + 4 + 2 = 10 공백이 필요합니다.

3. div.container에 콘텐츠를 포함 시키려면 div.container의 자식이어야합니다. 이렇게하려면 다음과 같이 그것을 들여 쓰기의 네 개의 추가 공간을 제공 :

    div.container 
         block content 
   

4. div.container이 nav 요소의 자식이어야합니다. 현재는 같은 레벨에 존재합니다. 이 문제를 해결하려면 nav 이후의 모든 줄에 추가로 들여 쓰기해야합니다 (3에서 수정 한 것 제외).