Bootstrap 导航栏垂直显示而不是水平显示答案

【问题标题】：Bootstrap navbar appearing vertically instead of horizontalBootstrap 导航栏垂直显示而不是水平显示
【发布时间】：2017-07-09 06:53:50
【问题描述】：

在处理一个项目时，我的导航栏显示为垂直列表，而不是在页面上水平显示。我尝试了几种不同的方法来修复并查看了其他帖子。我相信我的所有代码都是最新版本的引导程序，这似乎是其他人的问题，所以我很难过。这是我的 application.html.erb 文件，其中包含导航栏的代码。

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">BandArt</a>
  </div>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon"></span>My Profile</a></li>
    </ul>
  </div>
</div>

【问题讨论】：

第一，你有太多</div>s

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

您有一个额外的</div> 标记已关闭且<nav> 标记未关闭

【讨论】：

【解决方案2】：

你还没有关闭<nav class="navbar navbar-default navbar-fixed-top>

请关闭您在第一行创建的navbarclass..然后检查，它将水平显示。

【讨论】：

【解决方案3】：

此代码对我有用。我看到的唯一问题是你有一个太多的 div。这是我使用的代码：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<br><br>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">BandArt</a>
  </div>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon"></span>My Profile</a></li>
    </ul>
  </div>
</div>

我在 Rails 中都试过了，在 JSfiddle 中都有效，应该没有区别。

希望这会有所帮助！

【讨论】：

我已经分叉了你的小提琴，@jsfiddle.net/4xoj74fL 并将链接部分单独更改为最新的 v4alpha Bootstrap 链接，并且存在 OP 的问题。