【发布时间】：2016-11-21 23:20:00
【问题描述】：
我正在为此使用 Jade。我的主要布局包含引导导航栏。该文件本身称为 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 文件目前是空的。
关于如何修复重叠的想法？
【问题讨论】：
-
我对你在这里问什么感到有点困惑。您的导航栏与其他内容重叠？您正在使用引导类
navbar-fixed-top。这会将导航栏固定到页面顶部并与其他内容重叠，因为它的z-index: 1030. -
哦，我不知道。我怎样才能拥有一个既固定又不与其他内容重叠的导航栏？ @A1raa
-
我不太确定您为什么要将导航栏固定在页面顶部，但由于内容阻塞而无法看到。
navbar-fixed-top表示您的导航栏将位于页面顶部，即使在滚动时也是如此。您是否想要一个保持连接到网页顶部并在向下滚动内容时保持在那里，而不是连接到视口顶部？如果是这种情况，只需删除navbar-fixed-top并保留其余部分。 -
@A1raa 好吧，我确实希望导航栏在滚动时固定在顶部，但我不希望登录页面上的内容与导航栏重叠。我想我需要将此内容下移。
-
我明白了。您可以将
.container偏移导航栏的高度。您可以给它一个margin-top: 51px（默认引导导航栏高度，边框为 1px）。这应该在你的 style.css 文件中。如果你不想使用jumbotron，你可以给.container一个像#landingContentContainer这样的ID。这应该可以解决您的问题，但可能有更好的方法来解决这个问题，我确信已经在这个网站上得到了回答。当navbar-toggle处于活动状态时，您可能必须删除此边距。
标签： html css twitter-bootstrap pug