Menu rozwijane renderuje się pod nieprawidłowym elementem nawigacyjnym

Question

Buduję witrynę z Bootstrap 2 i chcę dodać menu rozwijane do jednego elementu na pasku nawigacyjnym.

Wystarczająco proste. Jednak, gdy rozwijana jest rozwinięty, wydaje się pod nieprawidłowego elementu na pasku nawigacyjnym:

Wskazówki na powyższym zrzucie że rozwijana czyni pod „admin” (pierwszy od lewej elementu navbar) zamiast „Locator "(element, który aktywuje rozwijanie).

Jak to naprawić, aby menu pojawiło się pod właściwym elementem paska nawigacyjnego?

Oto HTML na pasku nawigacyjnym:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="brand" href="...">Dashboard</a> 

     <div class="nav-collapse collapse pull-right"> 
     <ul class="nav"> 
      <li><a href="...">Admin</a></li> 
      <li><a href="...">Find Trips</a></li> 

      <!-- Locator Dropdown --> 
      <li> 
      <a id="nav-locator-dropdown" class="dropdown-toggle" href="..." 
        data-toggle="dropdown" data-target="#"> 
       Locator 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown"> 
       <li><a href="...">My Trips</a></li> 
       <li><a href="...">Create Trip</a></li> 
      </ul> 
      </li> 

      <li><a href="...">My Profile</a></li> 
      <li><a href="...">Log Out</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Twój rozwijana jest wyświetlana w niewłaściwym miejscu, ponieważ tracisz klasę definiującą względną pozycję dla swojego menu. Aby rozwiązać ten problem, wystarczy dodać klasę .dropdown do menu z podmenu tak:

<li class="dropdown"> ... </li>

Oto twój stały narzut:

HTML

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="brand" href="...">Dashboard</a> 

     <div class="nav-collapse collapse pull-right"> 
     <ul class="nav"> 
      <li><a href="...">Admin</a></li> 
      <li><a href="...">Find Trips</a></li> 

      <!-- Locator Dropdown --> 
      <li class="dropdown"> 
      <a id="nav-locator-dropdown" class="dropdown-toggle" href="..." 
        data-toggle="dropdown" data-target="#"> 
       Locator 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown"> 
       <li><a href="...">My Trips</a></li> 
       <li><a href="...">Create Trip</a></li> 
      </ul> 
      </li> 

      <li><a href="...">My Profile</a></li> 
      <li><a href="...">Log Out</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>