Menu rozwijane renderuje się pod nieprawidłowym elementem nawigacji - menu rozwijane, wyrównanie, twitter-bootstrap-2

Tworzę witrynę za pomocą Bootstrap 2 i chcę dodać menu rozwijane do jednego elementu na pasku nawigacyjnym.

Wystarczająco proste. Jednak po rozwinięciu menu pojawia się pod niepoprawnym elementem na pasku nawigacyjnym:

Zauważ na powyższym zrzucie ekranu, że menu rozwijane wyświetla się pod „Admin” (skrajnie lewy element paska nawigacyjnego) zamiast „Locator” (element, który aktywuje menu rozwijane).

Jak to naprawić, aby menu rozwijane pojawiło się pod odpowiednim elementem paska nawigacyjnego?

Oto kod HTML paska nawigacyjnego:

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

Odpowiedzi:

Lista rozwijana pojawia się w niewłaściwym miejscu, ponieważ „brakuje klasy, która określa względną pozycję listy rozwijanej. Aby to naprawić, po prostu dodaj .dropdown klasa do pozycji menu za pomocą takiego podmenu:

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

Oto twój ustalony znacznik:

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>