Twitter Bootstrap - rozwijanie wewnątrz navbara, ale poza nav-collapse

Question

Chcę dodać rozwijane menu do paska nawigacyjnego, ale upewnij się, że po zmianie rozmiaru przeglądarki na węższą szerokość, rozwijanie pozostaje widoczne w pasku nawigacyjnym i nie jest zawarte w nav-collapse.

Poniższy html działa. Jednak po zmianie rozmiaru strony rozwijana lista zostanie przeniesiona do następnego wiersza, a ekran zostanie rozwinięty w pasku nawigacyjnym, pozostawiając mi bardzo głęboki pasek nawigacyjny.

Nazywam bootstrap-collapse.js i bootstrap-dropdown.js.

Ktoś ma jakieś pomysły?

<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

Jest tak, ponieważ pojemnik jest wyściełany w prawo lub coś w tym stylu. Użyj prawego marginesu lub lewego marginesu: -30px; po prawej, po lewej stronie, nieuporządkowaną listę.

Nie bardzo ładna, ale dopóki go naprawić ...

Answer 2

According to Mark Otto, jeden z twórców bootstrap za:

Wszystkie listy rozwijanej w ramach .nav na pasku nawigacyjnym zostaną naruszone. Obecnie nie oferujemy sposobu, aby temu zapobiec.

Jednak możliwe jest posiadanie niezakończonego menu rozwijanego w zwiniętym pasku nawigacyjnym. Możesz to zrobić na jeden z trzech sposobów:

1. Dodaj atrybut danych do listy rozwijanej (data-no-collapse="true"), aby naprawić elastyczne selektory.
2. Zamień klasę rozwijaną (class="dropdown-menu-no-collapse"), aby odbudować jej style od podstaw.
3. Dodaj kolejną klasę do listy rozwijanej (class="dropdown-menu no-collapse), aby nadpisać style responsywne.

I wrote a blog post wyjaśnia, co należy zrobić. Pierwsza metoda wymaga edycji bootstrap-responsive.css, a druga wymaga zmiany bootstrap.css. Nie musisz zmieniać żadnego kodu CSS bootstrap dla trzeciej metody, ale jest to dość trudne do utrzymania.