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

enter image description here

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

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

javascript - Replicate keyboard event with html button -

javascript - Web audio api 5.1 surround example not working in firefox -