with right poner navegacion logo imagen con centrado bootstrap barra twitter-bootstrap responsive-design text-alignment

twitter bootstrap - right - Alineamiento de texto receptivo en Bootstrap 2.x de Twitter



navbar right bootstrap 4 (2)

En Bootstrap 3 usando LESS, agregué lo siguiente:

/* Defaults */ .text-center-sm, .text-center-md, .text-center-lg, .text-right-sm, .text-right-md, .text-right-lg { text-align: inherit; } /* Define xs styles after defaults so they take precedence */ .text-center-xs { text-align: center; } .text-right-xs { text-align: right; } /* Small grid */ @media (min-width: @screen-tablet) { .text-center-sm, .text-center-xs { text-align: center; } .text-right-sm, .text-right-xs { text-align: right; } } /* Medium grid */ @media (min-width: @screen-desktop) { .text-center-md, .text-center-sm, .text-center-xs { text-align: center; } .text-right-md, .text-right-sm, .text-right-xs { text-align: right; } } /* Large grid */ @media (min-width: @screen-lg-desktop) { .text-center-lg, .text-center-md, .text-center-sm, .text-center-xs { text-align: center; } .text-right-lg, .text-right-md, .text-right-sm, .text-right-xs { text-align: right; } }

Si no está utilizando LESS, cambie @screen-tablet a 768px , @screen-desktop a 992px , y @screen-lg-desktop a 1200px .

En bootstrap, estoy tratando de lograr un diseño que agrupe dos piezas de texto (una etiqueta, A , y algo de contenido, B ) al tenerlas cerca una de la otra, así:

A (right-aligned) | B (left-aligned)

Usando diseños receptivos en bootstrap, esto se ve genial hasta que la cuadrícula se apila en ventanas estrechas. Entonces se convierte en:

| A (right-aligned) B (left-aligned) |

... y parece que los dos ya no están relacionados.

Preferiría que una vez apilados, los elementos estarían centrados o alineados a la izquierda.

Sé que puedo usar las clases .visible- * y .hidden- * para arreglar esto, pero eso se siente como un hack. ¿Existe una manera simple de cambiar la alineación de texto en respuesta a las partes de la cuadrícula de arranque?


Para alinear a la derecha (alineación izquierda será por defecto) puede usar texto-alinear: a la derecha en su tramo. Para hacer que esto responda, use consultas de medios para aplicarlo solo en pantallas grandes:

@media (min-width:768px) { .text-right-responsive {text-align:right;} .text-left-responsive {text-align:left;} }

html:

<div class="container"> <div class="row"> <div class="span6 text-right-responsive">A (right-aligned)</div> <div class="span6 text-left-responsive">B (left-aligned)</div> </div> </div>

Ver también: https://.com/a/14809431/1596547 desde la versión 2.3 Twitter Bootstrap también tiene clases de texto *. Entonces, podría usar: <div class="span6 text-right">A (right-aligned)</div> . Además, esta clase no responde. text-right solo agrega text-align: derecho al estilo de su elemento. Por lo tanto, necesita consultas de medios para restablecer esto también. Restablece la alineación de texto para pantallas pequeñas:

@media (max-width:767px) { .text-right {text-align:left;} .text-left {text-align:left;} }

Las clases pull-right / pull-left agregan un flotante al elemento. Entonces, para usarlos necesitarás un envoltorio adicional:

<div class="container"> <div class="row"> <div class="span6"><span class="pull-right">A (right-aligned)</span></div> <div class="span6"><span class="pull-left">B (left-aligned)</span></div> </div> </div>

En este caso, también puede usar consultas en los medios. Ahora necesita restablecer el flotador para pantallas pequeñas:

@media (max-width:767px) { .pull-right {float:none;} .pull-left {float:none;} }

DEMO: http://bootply.com/66024