Navbar重叠其他内容

Question

我正在使用Jade。我的主要布局包含bootstrap导航栏。文件本身称为layout.jade

doctype html
html
  head
    meta(name='viewport', content='width=device-width, initial-scale=1.0')

    title= title
    link(rel='stylesheet', href='/stylesheets/bootstrap.css')
    link(rel='stylesheet', href='/stylesheets/style.css')

  body
    .navbar.navbar-default.navbar-fixed-top
        .container
                .navbar-header
                    a.navbar-brand(href='/') Loc8r
                    button.navbar-toggle(type='button', data-toggle='collapse',
                    data-target='#navbar-main')
                        span.icon-bar
                        span.icon-bar
                        span.icon-bar
                #navbar-main.navbar-collapse.collapse
                    ul.nav.navbar-nav
                        li
                            a(href='/about/') About

    .container
        block content

        footer
            .row
                .col-xs-12
                    small © Anon

    script(src='/javascripts/jquery-3.1.1.js')
    script(src='/javascripts/bootstrap.js')

以下文件是放入上述文件中第二个.container的内容。

extends layout

block content
    h1 #{title}
    p Welcome to #{title}

    .row.list-group
        .col-xs-12.list-group-item
            h4
                a(href='/location') Location name
                small  
                    span.glyphicon.glyphicon-star
                    span.glyphicon.glyphicon-star
                    span.glyphicon.glyphicon-star
                    span.glyphicon.glyphicon-star-empty
                    span.glyphicon.glyphicon-star-empty
                span.badge.pull-right.badge-default distance
            p.address Address here
            p
                span.label.label-warning label
                |    
                span.label.label-warning label
                |    
                span.label.label-warning label
                |    
        .col-xs-12.col-sm-4
            p.lead Loc8r description

我的style.css文件目前为空。

关于如何解决重叠的想法？

Answer 1

您可以在内容的容器中添加padding-top（添加一个类以选择该容器）。这将使内容略微降低。例如，

.block-content
  padding-top: 60px