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 lis classes.
2. bootstrap automatically applies margins ul tag, reset them or apply values like, example:
ul { margin: 0 !important; } 
Comments
Post a Comment