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

navbar right bootstrap 4

Question

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?

Answer 1

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 .

Answer 2

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