导航栏是垂直的而不是水平的答案

【问题标题】：navbar is vertical instead of horizontal导航栏是垂直的而不是水平的
【发布时间】：2018-05-25 14:17:45
【问题描述】：

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

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

【问题讨论】：

@jeh ta-da。我不知道，我只是使用了一些引导 cdn。代码和问题现在可以通过复制+粘贴在 jsfiddle/任何环境中重现。
我认为您正在混合 bootstrap 3 和 4。从 3 升级到 4 并不是那么简单。标记和类需要更新。例如。 bootstrap 4 中没有 navbar-default 类

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以删除背景。

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

【讨论】：

【解决方案2】：

我删除了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>

【讨论】：

我不只是从 ul 中删除 Bootstrap 的 navbar-nav（在编写时它包含五个属性），而是在我的自定义 CSS 中添加了类并使用 flex-direction:row !important 覆盖了 flex-direction。我想保留该类的其他四个属性将获得更可预测的结果和跨浏览器兼容性。

【解决方案3】：

您没有包含 Jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 并确保将您的导航栏 ul 包装在容器流体中，如图所示。这样，当调整大小时，它将响应并垂直对齐小视口：

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

【讨论】：

尝试全屏查看。
Bootstrap 默认是响应式的，所以你在这里看到的预览是垂直的，但是一旦页面足够宽，它就会变成水平的

【解决方案4】：

从我看到的问题来看，列表是列表， ul 和 li 将制作垂直列表。如果你想要水平的，你需要一些 css 或一些样式。

尝试添加如下内容：

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

【讨论】：