Twitter Bootstrap - Dropdown menus inside navbar but outside floods

Question

I want to add a drop-down menu to the navigation bar, but make sure that when you resize the browser to a narrower width, the drop-down menu remains visible on the navigation bar and navigation is not turned on.

The html below works. However, when changing the page size, the drop-down menu falls to the next line and appears in the extended navigation bar, leaving me a very deep navigator.

I call bootstrap-collapse.js and bootstrap-dropdown.js.

Does anyone have any idea?

<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> <div class="container"> <ul class="nav pull-right"> <li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sharing<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Google+</a></li> </ul> </li> </ul> </div> </div> </div> </div> 

Answer 1

According to Mark Otto , one of the bootstrap developers:

All .nav drop-down menus in the navigation bar will be affected. We currently do not offer a way to prevent this behavior.

However, in the minimized navigator, you can have a drop-down menu. You can do this in one of three ways:

• Add the data attribute to the drop-down list ( data-no-collapse="true" ) to fix the sensitive selector.
• Replace the dropdown list class="dropdown-menu-no-collapse" ( class="dropdown-menu-no-collapse" ) to rebuild its styles from scratch.
• Add another class to the drop-down list ( class="dropdown-menu no-collapse ) to override sensitive styles.

I wrote a blog post explaining what to do. The first method requires editing bootstrap-responsive.css , and the second requires changing bootstrap.css . You do not need to change any of the boot CSS for the third method, but it is rather difficult to maintain.

Answer 2

This is because the container is complemented on the right or something like that. Use margin-right respectively margin-left: -30px; in the far right, respectively left unordered list.

Not very pretty, but until they fix it ...