Html 如何使用Bootstrap 4正确显示导航？

我正在做一些更新，以一个和实施引导4测试版，我有问题的导航显示正确。我已经能够精巧的一些方面，但它是卡在一个垂直显示-见附件

以下是HTML：

<nav class="navbar navbar-default">
      <div class="container">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button> 
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

---

我单独做了基本布局，导航显示正确，但我看不出是什么导致它在这里失败。如有任何见解，将不胜感激。

对于Bootstrap V3:

切换导航










导航标题

当我删除额外的CSS时，我看到一个蓝色框。我看不到你在看什么。如果没有额外的CSS，你会看到一个蓝盒吗？尝试使用我在您的文件中发布的代码，而不使用额外的CSS，看看它是否仍然相同。并确保您的引导文件已更新。Highdef。这解决了一个问题，但也带来了一系列其他问题。将显示导航，但资源文件和导航代码都来自Bootstrap 3.3.7。我使用的是Bootstrap 4，两者不兼容。@fmz好吧，您发布的导航代码是针对Bootstrap 3的，这就是为什么它引入了样式问题，您可以继续使用Bootstrap 4，但您需要将整个导航更改为Bootstrap 4。没错。我一直在两个系统之间来回工作，不小心把版本3的导航代码留在了那里。非常感谢。

.navbar { 
  float: left; 
}

#navbar { 
  display: block; 
}

ul.nav.navbar-nav > li.active { 
  float: left;
}