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

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

Как я могу добавить эту стрелку снова с помощью 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: чтобы быть точным, изображение можно увидеть в другой статье stackoverflow.

4 53
css twitter-bootstrap-3

4 ответа:

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

демо JSFiddle

.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 треугольники

150

просто чтобы следить за этим - если вы хотите, чтобы стрелка располагалась правильно (например, при использовании ее на элементе 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.

18

CSS, который предоставил Александр Mistakidis, является правильным. То есть, он создает стрелку поверх выпадающего меню в Bootstrap. Чтобы правильно разместить его в отзывчивом представлении (@user2993108), вы можете изменить

3

это основано на работе Александра Mistakidis и Joyrex для поддержки дополнительных стрелок и выпадающих меню. В моем случае я не хотел иметь стрелку на все из выпадающего меню, только некоторые.

С этим, вы добавляете 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;
}
2