Бутстрап 3 стрелка в выпадающем меню

В бутстрапе 2 в раскрывающемся меню была стрелка вверх, как это видно здесь (я не говорю о картере). Теперь, используя bootstrap 3 или last git, эта стрелка не существует в моем простом примере ниже или в примерах на домашней странице начальной загрузки.

Как я могу добавить эту стрелку снова, используя bootstrap 3?

  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Menu
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
    </ul>
  </li>

PS: Чтобы быть точным, изображение можно увидеть в qaru.site/info/106679/....

Ответ 1

Вам нужно добавить: after и: before css rules к вашему dropdown-menu. Эти правила взяты из Bootstrap 2, и вот что рисует треугольник над выпадающим меню.

JSFiddle DEMO

.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 #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

Смущенный, как? Смотрите здесь анимацию, которая объясняет треугольники css

Ответ 2

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

.navbar .navbar-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.navbar-right:before {
    right: 12px; left: auto;
}

.navbar .navbar-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.navbar-right:after {
    right: 13px; left: auto;
}

Обратите внимание на "navbar-right" - это было введено в BS3 вместо pull-right для navbars.

Ответ 3

CSS, предложенный Александром Мистакидисом, является правильным. То есть он создает стрелку поверх раскрывающегося меню в Bootstrap. Чтобы правильно позиционировать его в ответном виде (@user2993108), вы можете изменить атрибут left для каждого из селекторов классов (.dropdown-menu:before, .dropdown-menu:after) в разных медиа-запросах или контрольных точках.

Например...

@media (max-width: 400px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 30px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 31px; /* change for positioning */
  ...
}

}

@media (max-width: 767px) and (min-width: 401px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 38px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 39px; /* change for positioning */
  ...
}

}

и т.д.

Ответ 4

Это основано на работе Александра Мистакидиса и Джойрекса для поддержки дополнительных стрелок и выпадающих меню. В моем случае я не хотел иметь стрелку во всех раскрывающихся меню, только некоторые.

При этом вы добавляете класс arrow в элемент dropdown-menu для получения стрелки. Если Bootstrap позиционирует выпадающее меню/выпадающее меню влево, добавьте arrow-right, чтобы переместить стрелку на другую сторону.

// add an arrow to the dropdown menus
.dropdown-menu.arrow:before {
  position: absolute;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: '';
}
.dropdown-menu.arrow:after {
  position: absolute;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
}

// postion at the top for a 'down' menu
.dropdown .dropdown-menu.arrow:before {
  top: -7px;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dropdown .dropdown-menu.arrow:after {
  top: -6px;
  border-bottom: 6px solid #ffffff;
}

// postion at the bottom for an 'up' menu
.dropup .dropdown-menu.arrow:before {
  bottom: -7px;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
}
.dropup .dropdown-menu.arrow:after {
  bottom: -6px;
  border-top: 6px solid #ffffff;
}

// support to move the arrow to the right-hand-side
.dropdown-menu.arrow.arrow-right:before,
.dropup .dropdown-menu.arrow.arrow-right:before {
  right: 15px;
  left: auto;
}
.dropdown-menu.arrow.arrow-right:after,
.dropup .dropdown-menu.arrow.arrow-right:after {
  right: 16px;
  left: auto;
}