Question

我使用Node.js＆amp;表达和视图我使用玉模板，我想要的是测试文本将位于黑色导航栏下方的底部，目前我无法这样做（它隐藏在黑色导航栏下我怎么能移动它到底部），我想念的是什么？我把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 =＆＃39;测试＆＃39;

我将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

Answer 1

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

通过添加：

在页面顶部添加一些填充

body {
    padding-top: 70px;
}

到custom.css文件

Jade模板不按预期显示页面

1 个答案: