Alinear contenido flotante

Question

estoy usando el Kit de herramientas de arranque de Twitter para diseñar mi sitio.Estoy implementando un menú desplegable de botón dividido con un marcado similar al siguiente.

<div class="btn-group">
    <a class="btn btn-small btn-info" href="#">
        Add New Provider
    </a>
    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>

Esto funciona según lo previsto;sin embargo, me gustaría alinear todo el botón hacia la derecha.Pero el btn-group y btn Ambas clases flotan hacia la izquierda, por lo que se ignora cualquier alineación del texto.

Si supiera el ancho total del botón, podría configurar el exterior <div> a ese ancho y alinear todo <div> en un padre <div>.Pero no sé el ancho total.

¿Hay alguna manera de alinear este contenido a la derecha, sin volver a trabajar las clases de Bootstrap subyacentes?

Nota:He publicado un Demostración de jsFiddle

Answer 1

No puedo garantizar que esto funcione en su caso de uso específico (porque no lo he probado por mí mismo y no sé exactamente qué marcado y CSS está usando), pero sí funciona en su demostración de jsFiddle. :

.panel-container {
    display: inline-block;
    text-align: right;
}

Answer 2

solución jsFiddle

Recomiendo usar izquierda/derecha padding En lugar de usar text-align, aunque ambos seguirán funcionando, independientemente de si están flotando o no.Lo que importa es que sus anchos estén declarados. width: auto.

Si no desea modificar los archivos principales de Bootstrap, puede usar las mismas clases en una hoja de estilos separada y anular los estilos de Bootstrap.Solo asegúrese de que la hoja de estilo personal separada se llame después de Bootstrap.Por ejemplo...

en arranque.css:

.input-mini {
    width: 60px;
}

en tu hoja de estilo personal.css:

/* Redefine the same style
   declared in Bootstrap */

.input-mini {
    width: 40px;
} 

en tu encabezado:

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="personal-stylesheet.css" />

Answer 3

Esto se solucionó en bootstrap 2.0.2.Utilice la clase de arranque "pull-right"

https://github.com/twitter/bootstrap/issues/2045

http://jsbin.com/ebemiz/2/edit#html,en vivo