javascript - Disable new lines in bootstrap's navbar -
i want make bootstrap's navbar: jsbin:
<!doctype html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div id="navbar"> <ul class="nav navbar-nav"> <li><a>item1</a></li> <li><a>item2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">item3 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a>sub1</a></li> <li><a>sub2</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>
the problem of above code when reduce width of preview, items move different lines. however, want them (except submenu) in same line.
does know how fix this?
just display li
, a
tags inline
, this:
li { display: inline !important; } { display: inline !important; }
update
here answers questions in comments.
1. can add classes specific li
tags (except sub1
, sub2
in case), , apply display: inline !important
li
s classes.
2. bootstrap automatically applies margins ul
tag, reset them or apply values like, example:
ul { margin: 0 !important; }
Comments
Post a Comment