drop-down-menu - tipos - submenu desplegable bootstrap

Problema de bootstrap de Twitter: alinear correctamente el símbolo de intercalación en el encabezado desplegable

Question

Tengo un problema con la alineación correcta del caret. El uso de .pull-right en el tramo hace que vaya a la esquina superior derecha.

¿Cómo puedo hacerlo de nuevo centrado verticalmente? También me gustaría alinear el texto a la izquierda.

http://www.bootply.com/r8x7g5Bw5R

 <div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">test</a></li>
<li><a href="#">tes2</a></li>
<li><a href="#">test3</a></li>
</ul>
</div>

y el CSS

.cust-dropdown {
width: 200px;}

Answer 1

Existe una solución mucho más simple para este problema. Este estilo debe parecer el más natural y responder mejor a todos los usos, ya que no depende de ningún diseño predeterminado (excepto los estilos predeterminados de arranque).

.dropdown > .btn > .caret {
float: right;
margin: 6px 0;
// if you are using Less, the you can reuse the actual vertical padding
// margin: @padding-base-vertical 0;
}

Answer 2

Simplemente intercambie los bloques de intercalación y separación en HTML:

HTML

 <div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id= "titl">test</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">test</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
</ul>
</div>

CSS

 .cust-dropdown {
width: 200px;
}
#titl {
padding-right: 10px;
}

Puede alinear el texto más hacia la izquierda agregando más padding-right .

Answer 3

.caret {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #fff;
left: 90%;
top: 45%;
position: absolute;
}

Usando la posición absoluta y un porcentaje arriba y a la izquierda, pude alinear a la derecha el cursor en el menú desplegable. Funciona en Chrome, IE, y FF.

EDITAR

El código anterior funcionará, pero cambia el estilo del cursor. Si solo desea reposicionarlo manteniendo su estilo, simplemente extienda la clase .caret de Bootstrap:

.caret {
position: absolute;
left: 90%;
top: 45%;
}