javascript - 导航栏是垂直的而不是水平的

Question

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
   <nav class="navbar navbar-default">
      <ul class="nav navbar-nav">
         <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
         <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
         <li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
         <li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
         <li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
      </ul>
      <form class="form-inline">
         <a href="#" onclick="signOut();">Sign out</a>
         <div id="my-signin2">
            <!-- google oauth stuff -->
         </div>
      </form>
   </nav>
</div>

为什么这里显示的是垂直列表而不是水平列表？

Answer 1

我删除了 navbar-nav 类，它又是水平的了。我最好的猜测是 navbar-nav 类有一些与之关联的 css 覆盖了 navbar-default 样式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
   <nav class="navbar navbar-default">
      <ul class="nav">
         <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
         <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
         <li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
         <li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
         <li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
      </ul>
      <form class="form-inline">
         <a href="#" onclick="signOut();">Sign out</a>
         <div id="my-signin2">
            <!-- google oauth stuff -->
         </div>
      </form>
   </nav>
</div>