bootstrap 3 flecha en el menú desplegable

En bootstrap 2 el menú desplegable tenía una flecha hacia arriba como se puede ver aquí (no estoy hablando del carret). Ahora usando bootstrap 3 o latest git esta flecha no existe en mi ejemplo simple a continuación ni en los ejemplos en la página de inicio de bootstrap.

¿Cómo puedo añadir esta flecha de nuevo usando 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>

PD:Para ser precisos, la imagen se puede ver en otro artículo de stackoverflow.

Author: Community, 2013-11-14
Source

4 answers

Necesita agregar :after y :before reglas css a su dropdown-menu. Estas reglas se toman de Bootstrap 2, y son las que dibujan el triángulo sobre el menú desplegable.

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: '';
}

Confundido, ¿cómo? Vea aquí una animación que explica triángulos css

 150
Author: Alexander Mistakidis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-14 17:27:39

Solo para hacer un seguimiento de esto: si desea que la flecha se posicione correctamente (como cuando se usa en un elemento de la barra de navegación que está alineado a la derecha, necesita el siguiente CSS adicional para asegurarse de que la flecha esté alineada a la derecha: 

.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;
}

Tenga en cuenta la "barra de navegación-derecha" - que se introdujo en BS3 en lugar de pull-right para las barras de navegación.

 18
Author: Joyrex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-04 11:42:36

El CSS que Alexander Mistakidis proporcionó es correcto. Es decir, crea la flecha encima del menú desplegable en Bootstrap. Para posicionarlo correctamente en una vista responsiva (@user2993108), puede cambiar el atributo left para cada uno de los selectores de clase(.dropdown-menu:before,.dropdown-menu:after) en diferentes consultas de medios o puntos de interrupción.

, Por ejemplo...

@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 */
  ...
}

}

Y así sucesivamente...

 3
Author: Dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-15 20:15:16

Esto se basa en el trabajo de Alexander Mistakidis y Joyrex para soportar flechas opcionales y menús desplegables. En mi caso no quería tener una flecha en todos de los menús desplegables, solo algunos.

Con esto, se agrega la clase arrow al elemento dropdown-menu para obtener la flecha. Si Bootstrap está colocando el menú desplegable / desplegable a la izquierda, también agregue arrow-right para cambiar la flecha hacia el otro lado.

// 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
Author: Lucas Nelson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-26 00:12:33