Jade 模板未按预期显示页面答案

【问题标题】：Jade template are not display page as expectedJade 模板未按预期显示页面
【发布时间】：2015-02-05 06:26:09
【问题描述】：

我使用 Node.js & express，对于视图我使用 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

这是内容扩展布局

扩展布局

屏蔽内容 .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 中您可以看到测试位于导航栏下方

【问题讨论】：

标签： javascript css node.js express pug

【解决方案1】：

当导航栏浮动在页面顶部时，页面的其余内容从其下方开始。 Bootstraps 文档对此有解决方案，请参阅http://getbootstrap.com/components/#navbar-fixed-top。

通过添加在页面顶部添加一些填充：

body {
    padding-top: 70px;
}

到您的 custom.css 文件

【讨论】：

我使用 node.js 并且在公共文件夹中我只添加了 bootstrap.min.css 文件，我应该将您建议的代码放在哪里？
将 custom.css 文件添加到您的公用文件夹并以与 bootstrap.min.css 文件相同的方式包含它。确保在引导文件之后包含它。您可以使用此文件添加自己的自定义样式
可能是错字，我在你的 html 中看到 jumbtroon 而不是 jumbotron
我真的不知道为什么你看不到灰色区域，如果我从你的问题中复制 html，从 cdn 获取引导文件（参见外部资源），修复类型并添加padding-top: 70px 我认为它看起来不错。请参阅jsfiddle.net/ckuijjer/jLv3Lfy6 或imgur.com/0AKg4TE 中的屏幕截图。恐怕我不能再帮你了
使用font-size 可以设置使用的字体大小，例如li { font-size: 18px; } 会将所有列表项设置为18px。