Stylus Navbar covering text

Question

I am following through a video on Plural Sight and I can't get my navbar to stop hiding my text (or my text to move under the navbar).

I have a styl sheet as follows:

body
  padding-top 61px

.navbar-header a.navbar-brand
  margin-top -15px
  margin-bottom -20px
  h6
    color #ccc

footer
  padding-left 15px
  padding-right 15px
  p
    border-top 1px solid #d7e0e2

an index.jade as follows:

extends ../includes/layout

block main-content
    .navbar.navbar-inverse.navbar-fixed-top
        .container
            .navbar-header
                a.navbar-brand(href="/") MEAN Stack Tutorial
                    h6 -Extreme Tech Training
        .navbar-collapse.collapse
            .ul.nav.navbar-nav
                li
                    a(href="/") Home

    section.content
        div(ng-view)
    h2= mongoMessage

        footer.container.text-center
            p © 2014 BanksyCorp

and, finally a layout.jade :

doctype html
html
    head
        title MEAN Stack Tutorial
        base(href="/")
        link(href='/favicon.ico', rel='shortcut icon', type='image/x-icon')
        link(rel='stylesheet', href='/css/bootstrap.css')
        link(rel='stylesheet', href='/vendor/toastr/toastr.css')
        link(rel='stylesheet', href='/css/site.css')
    body(ng-app='app')
        block main-content
        include scripts

The example on the video, this code should make the content appear below the navbar, like such:

I know the styl file is being parsed as I can change some properties on it and see it change in the browser.

Answer 1

这是因为您有一个navbar-fixed-top类，该类具有position: fixed属性（块内容不在正常流程中）。