我使用 Node.js 和 express,对于 View 我使用 Jade 模板, 我想要的是 Test text 将位于黑色导航栏下方的底部,目前我无法这样做(它隐藏在黑色导航栏下方如何将其移动到底部) ,我在这里想念什么? 我把div放在
这是 jade -Layout.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
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')
spansronly
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 内容 .jumbtroon h1='测试'
我将 div.container 放在与第一个 div 相同的位置
这是呈现的 HTML
<html>
<head>
<title>
Arrivals
</title>
<link href="bootstrap.min.css" rel="stylesheet"></link>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse">
<spansronly></spansronly>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/recipes/bbq">
Tab1
</a>
</li>
<li>
<a href="/recipes/bbq">
Tab2
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbtroon">
<h1>
test
</h1>
</div>
</div>
</body>
</html>
在img中你可以看到测试在导航栏下面
最佳答案
当导航栏 float 在页面顶部时,页面的其余内容从其下方开始。 Bootstraps 文档为此提供了解决方案,请参阅 http://getbootstrap.com/components/#navbar-fixed-top .
通过添加以下内容向页面顶部添加一些填充:
body {
padding-top: 70px;
}
到你的 custom.css 文件
关于javascript - Jade 模板未按预期显示页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27343757/