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

Question

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

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

Answer 1

Вам необходимо добавить: после и: перед правилами css на ваш 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: ''; 
} 

Confused как? See here for an animation that explains css triangles

Answer 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-право» - который был введен в BS3 вместо выдвижных прав на NavBars

Answer 3

CSS, что Александр Mistakidis при условии правильно что сказать, это создает стрелка вверх по выпадающему меню в Bootstrap. Чтобы правильно позиционировать его в ответном виде (@ user2993108), вы можете изменить чанг e 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 */ 
    ... 
} 

} 

и так далее ...

Answer 4

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

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