javascript - Jade 模板未按预期显示页面

标签 javascript css node.js express pug

我使用 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中你可以看到测试在导航栏下面 enter image description here

最佳答案

当导航栏 float 在页面顶部时,页面的其余内容从其下方开始。 Bootstraps 文档为此提供了解决方案,请参阅 http://getbootstrap.com/components/#navbar-fixed-top .

通过添加以下内容向页面顶部添加一些填充:

body {
    padding-top: 70px;
}

到你的 custom.css 文件

关于javascript - Jade 模板未按预期显示页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27343757/

相关文章:

javascript - Node.js: 'yield' 关键字的 promise 回调库

javascript - 通过正则表达式检查合法字符但出现意外结果

javascript - 通过降低高度来验证单独的文本字段样式不起作用

javascript - 有没有办法删除 JSFiddle 嵌入式 View 中的顶部栏

css - IE6 中的圆 Angular 矩形鼠标悬停问题

jquery 鼠标悬停抖动

javascript - 制作文本编辑字段

node.js - MongoDB 集合插入添加 _id 字段

javascript - ASP.NET javascript 超时后关闭页面?

node.js - 永远监控抛出 ENOENT 并且不工作