Jekyll 构建引导导航栏

Question

我正在 Jekyll 中建立一个网站（我是新手），当我将我的网站提供给我的本地主机时，导航栏显示不正确。在我使用过 Bootstrap 的所有网站中，这从未发生过。似乎正在选择屏幕阅读器选项，但话又说回来，我对 Jekyll 还很陌生。

在导航栏上，应该有默认按钮显示在它的右侧，并带有四个选项。

这是我的 HTML：

<header>
<nav class="navbar navbar-default navbar-fixed-top main-navbar site-header">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed navbar-menu-button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="navbar-menu">Menu</span>
        </button>
       <a class="site-title navbar-brand" href="{{ site.baseurl }}/">Web Site</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a {% if page.url contains 'about' %}class="current-page"{% endif %} href="{{site.baseurl}}/about">About</a></li>
          <li><a {% if page.url contains 'portfolio' %}class="current-page"{% endif %} href="{{site.baseurl}}/portfolio">Work</a></li>
          <li><a {% if page.url contains 'blog' %}class="current-page"{% endif %} href="{{site.baseurl}}/blog">Blog</a></li>
          <li><a {% if page.url contains 'contact' %}class="current-page"{% endif %} href="{{site.baseurl}}/contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="{{ site.baseurl }}/js/bootstrap.js"></script>
</header>

Answer 1

整个nav元素及其子元素不应在header元素内，而应在body元素内。