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