Question

处理项目时，我的导航栏显示为垂直列表，而不是横向显示在页面上。我已经尝试了几种不同的方法来修复和查看其他帖子。我相信我的所有代码都是最新版本的bootstrap，这似乎是其他人的问题，所以我很难过。这是我的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>

Answer 1

此代码适用于我。我看到的唯一问题是你有一个太多的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中都有效，但应该没有区别。

希望这有帮助！

Answer 2

您尚未关闭<nav class="navbar navbar-default navbar-fixed-top>

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

Answer 3

您还有一个额外的</div>代码已关闭且<nav>代码未关闭

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

3 个答案: