agregando la flecha a las píldoras desplegables para twitter bootstrap?

Tengo los botones desplegables de arranque de twitter trabajando con éxito, pero tengo un pequeño problema. La barra de navegación negro aquí:agregando la flecha a las píldoras desplegables para twitter bootstrap?

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

Tiene una pequeña flecha desplegable ordenada cuando la abre, ¿verdad? Bueno, estoy usando las pastillas justo debajo y no tienen esa flecha. Parece que la flecha solo está incluida cuando utilizo la barra de navegación, que no necesito.

¿Alguien ha encontrado una forma de agregar las flechas a las píldoras? :(

Fuente

2012-07-24 user1227914

que Asumiendo estés en referencia a la flecha blanca que apunta hacia arriba cuando se hace clic en un elemento de menú, el estilo que está buscando está en línea 3907 en bootstrap.css:

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

usted puede intentar copiar este estilo yr quitar la parte .navbar de la declaración de estilo y modificarla para que se ajuste a su código.

Fuente

2012-07-24 14:56:34

¡Eso es PERFECTO! Gracias :) Simplemente creé una copia, eliminé .navbar y no funciona !!!! – user1227914

Esto funciona pero el borde alrededor de la flecha no se muestra. ¿Alguna idea de lo que debería hacer? – Anthony

@Anthony Esto se debe a que también debe incluir el estilo :: before, que realmente crea el borde alrededor de la flecha. :) Vea algunas otras respuestas en esta página. Francamente, este aceptado no es el mejor. – smajl

No estoy seguro que las píldoras son, pero si usted tiene el bootstrap de agregar las flechas con sólo poner esto en cualquier lugar en el código.

<b class="caret"></b>

es eso lo que quería decir?

Fuente

2012-07-24 14:53:25

Sí, esa es la flecha hacia abajo, pensé que uno, pero el problema es el arriv hacia arriba que se parece a una "V" invertida fuera de la menú que luego se abre, hacia el enlace de arriba. – user1227914

Se crean con :: before (que es css3), por lo que dependiendo de qué navegador estés usando, aparecerá o no: –

Gracias amigo :) :) –

Aquí hay un refinamiento de la respuesta de Jason Towne.

Esto funciona correctamente si el menú se ha movido hacia la derecha.

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

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

.btn-group.pull-right > .dropdown-menu-arrow::before { 
    left: inherit; 
    right: 9px; 
} 

.btn-group.pull-right > .dropdown-menu-arrow::after { 
    left: inherit; 
    right: 10px; 
}

Aquí hay un ejemplo de uso.

<div class="btn-group pull-right"> 
    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"> 
    Actions 
    <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu dropdown-menu-arrow"> 
     <li>...</li> 
    </ul> 
</div>

Fuente

2013-03-21 11:56:34

Gran ayuda ...! Resolví mi problema usando su respuesta. Gracias – Naju

Este es un trabajo para mí

//css 
     .arrow-right > .dropdown-menu:after { 
     content: ''; 
     display: inline-block; 
     border-left: 6px solid transparent; 
     border-right: 6px solid transparent; 
     border-bottom: 6px solid #ffffff; 
     position: absolute; 
     top: -6px; 
     right: 10px; 
     } 

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

    // html 

//for left side dropdown menu 

    <div class="dropdown arrow-left"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
    ... 
    </ul> 
    </div> 


//for right side dropdown menu 

    <div class="dropdown pull-right arrow-right"> 
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> 
    Dropdown 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
    ... 
    </ul> 
    </div>

Fuente

2013-07-02 16:58:23 harry34

agregando la flecha a las píldoras desplegables para twitter bootstrap?

Respuesta

Cuestiones relacionadas