Bootstrap导航栏出现垂直而不是水平 [英] Bootstrap navbar appearing vertically instead of horizontal

问题描述

在一个项目上工作，我的导航栏显示为垂直列表，而不是水平排列在页面上。我尝试了几种不同的方式来修复并查看其他帖子。我相信我所有的代码都与最新版本的bootstrap保持同步，这似乎是其他人的问题，所以我很难过。

 < nav class =navbar navbar-默认navbar-fixed-top> 
< div class =container-fluid> 
< div class =navbar-header> 
< a class =navbar-brandhref =＃> BandArt< / a> 
< / div> 
< form class =navbar-form navbar-left> 
< div class =form-group> 
< input type =textclass =form-controlplaceholder =Search> 
< / div> 
< button type =submitclass =btn btn-default>提交< / button> 
< / form> 
< ul class =nav navbar-nav navbar-right> 
< a>< a href =＃>< span class =glyphicon>< / span>我的个人资料< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  

解决方案

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

Working on a project and my navbar is appearing as a vertical list instead of horizontally across the page. I've tried several different ways to fix and looked at other posts. I believe all my code is up to date with the newest version of bootstrap which seemed to be an issue with others, so I am stumped. Here is my application.html.erb file, with the code for the navbar.

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

解决方案

You have one extra </div> tag closed and <nav> tag not closed

这篇关于Bootstrap导航栏出现垂直而不是水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！