navbar is vertical instead of horizontal

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

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 2

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 3

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