Какая тайна треугольника меню выпадающего меню Bootstrap?

Я пытаюсь понять разницу между раскрывающимися меню Twitter Bootstrap, когда они включены в навигационную панель, а когда нет.

Когда они включены в навигационную панель, в расширенном меню отображается немного треугольник/стрелка вверх. Этот треугольник не отображается, если navbar не используется:

http://twitter.github.com/bootstrap/javascript.html#dropdowns

Я просто потратил два часа на изучение css/html, я до сих пор не понимаю ПОЧЕМУ...

Любая идея?

Ответ 1

В раскрывающемся меню используются два стиля, когда внутри элемента nav. Они выглядят следующим образом:

.navbar .nav > li > .dropdown-menu::before {
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 }
 .navbar .nav > li > .dropdown-menu::after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  }

Они создают два треугольника друг над другом, один светло-серый, другой темно-серый. Если вы используете инструменты разработчика Chrome, вы можете проверить эти элементы и отключить разные стили, чтобы понять, что они делают. Эти стили не применяются без навигационной панели

Ответ 2

Просто добавьте это в CSS, и вы сможете использовать раскрывающееся меню стрелки, не помещая раскрывающийся список внутри панели навигации

.dropdown-menu:before {
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 }

.dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  }

.dropdown-menu:before, .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}

.dropdown-menu::after, .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}

Ответ 3

Треугольник может быть сгенерирован следующим синтаксисом:

    <b class="caret dropdown-toggle"></b>