Geek Answers Handbook

Twitter Bootstrap 3 - Navbar not horizontal

I'm fiddlin 'with bootstrap 3. I'm trying to do horizontal navigation, except that it does not work out horizontal. I thought the navigator should be horizontal out of the box, may I need another css?

I tried to make code copying the navigation bar from the documentation for bootstrapping, for example:

<div class="row"> <div class="col-12"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </div> </div>

http://jsfiddle.net/FxkZT/

+8
twitter-bootstrap twitter-bootstrap-3
source share
2 answers

Demo

Your code is for BootStrap 2 and needs to be changed. In bootstrap 3:

  • <a class="brand" href="#">Title</a> becomes <a class="navbar-brand" href="#">Title</a>
  • <ul class="nav"> becomes <ul class="nav navbar-nav">
  • No more <div class="navbar-inner">

More information in the document here .

+19
source share

http://jsfiddle.net/FxkZT/5/

I just added this little CSS, check it out and let me know if it works for you:

CSS

 @import url('http://getbootstrap.com/dist/css/bootstrap.css'); .navbar .nav > li { float:none; display:inline-block; *display:inline; /* Internet Explorer 7 compatibility */ *zoom:1; vertical-align: top; }

HTML:

 <div class="row"> <div class="col-12"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </div> </div>
+2
source share

More articles:


All Articles