引导程序未按预期工作

Question

我使用 twitter bootstrap for node.js UI，下面的 HTML 是我使用 Jade 后得到的 我想要的是使用 jumbotron http://getbootstrap.com/examples/jumbotron/ 并将选项卡 1 和 2 放在导航栏上项目名称的同一行中，并使用链接中的黑色，我尝试了很多东西，什么我在这里做错了吗？

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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>
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button>
    </div>
    <a class="navbar-brand" href="/#">
                        Node Rec
    </a>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/recipes/b1">

                                    Tab1

                                </a>
        </li>
        <li>
          <a href="/recipes/b1"></a>
        </li>
      </ul>
      <div class="container"></div>
      <div class="jumbotron"></div>
      <h1>

                            List Arrivals

                        </h1>
      <ul>
        <li>

          33: LAX-Tue Dec 02 2014 16:04:41

        </li>
        <li>

          13: MKE-Tue Dec 02 2014 16:05:48
        </li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</nav>

这就是现在的样子……

当我将其更改为 navbar-inverse 时，我得到了相反的结果，这不是 jumbotron 的样子

Answer 1

这可能是一个开始。我已将 jumbotron 移到 <nav> 之外。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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>
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button>
    </div>
    <a class="navbar-brand" href="/#">
                        Node Rec
    </a>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/recipes/b1">Tab1</a>
        </li>
        <li>
          <a href="/recipes/b1">Tab2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="jumbotron">
    <h1>

                            List Arrivals

                        </h1>
    <ul>
      <li>

        33: LAX-Tue Dec 02 2014 16:04:41

      </li>
      <li>

        13: MKE-Tue Dec 02 2014 16:05:48
      </li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
</div>