导航栏是垂直的，而不是水平的

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> 

Why does this show a vertical list instead of a horizontal one?

Answer 1

I removed the navbar-nav class and it's horizontal again. My best guess is that the navbar-nav class has some css associated with it that was overwriting the navbar-default styles.

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

Answer 2

You didn't include Jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> and make sure to wrap your navbar ul in a container-fluid as demonstrated. This way when resized it will be responsive and get vertically aligned for small viewports :

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script> <div id="navigation"> <nav class="navbar navbar-default"> <div class="container-fluid"> <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> </div> </nav> </div> 

Answer 3

You can Remove the Background.

<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="menu-outer">
<div id="table">
   <nav class="navbar navbar-default horizontal-list">
      <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>
</div>

<style>
    #menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
    }
    ul#horizontal-list li {
        display: inline;
    }
</style>

Answer 4

From what I see your issue is that lists are lists, ul and li will make vertical lists. If you want horizontal you need some css, or some style.

Try adding something like this:

<html>
<head>
<style>
ul li {
    display:inline;
}
</style>
</head>
<body>

<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>
  </body>
</html>