Выпадающее меню отображается под неправильным элементом панели навигации

Я создаю сайт с помощью Bootstrap 2 и хочу добавить раскрывающееся меню к одному элементу на панели навигации.

Достаточно просто. Однако, когда раскрывающийся список раскрывается, он появляется под неправильным элементом на панели навигации:

Раскрывающееся меню развернуто под крайним левым элементом панели навигации вместо раскрывающегося контейнера.

Обратите внимание, что на приведенном выше снимке экрана раскрывающийся список отображается под «Администратор» (крайний левый элемент панели навигации) вместо «Локатор» (элемент, который активирует раскрывающийся список).

Как исправить это, чтобы раскрывающийся список отображался под правильным элементом панели навигации?

Вот 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>
            <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>

drop-down-menu alignment twitter-bootstrap-2
person Community    schedule 20.01.2013    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Ваш раскрывающийся список появляется не в том месте, потому что вам не хватает класса, который определяет относительную позицию для вашего раскрывающегося списка. Чтобы исправить это, просто добавьте класс .dropdown в свой пункт меню с таким подменю:

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

Вот ваша фиксированная разметка:

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>
person Andres Ilich    schedule 21.01.2013