css - left - Bootstrap 3: pull-right solo para col-lg
padding bootstrap 3 (12)
Nuevo en bootstrap 3 ... En mi diseño tengo:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right">
elements 2
</div>
</div>
</div>
Me gustaría que los "elementos 2" NO se alineen correctamente en pantallas más pequeñas que col-lg. Entonces, efectivamente, teniendo la clase pull-right solo para col-lg-6 ...
¿Cómo podría lograr esto?
Aquí hay un violín: http://jsfiddle.net/thibs/Y6WPz/
Gracias
¡Simplemente use las clases de utilidad receptivas de bootstrap!
La mejor solución para esa tarea es usar el siguiente código:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6 text-right">
<div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
elements 2
</div>
</div>
</div>
El elemento se alineará a la derecha solo en las pantallas lg
; en el resto, el atributo de display
se establecerá en block
como lo hace de forma predeterminada para el elemento div
. Este enfoque usa la clase text-right
en el elemento padre en lugar de pull-right
.
Solución alternativa:
La mayor desventaja es que el código html dentro debe repetirse dos veces.
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right visible-lg">
elements 2
</div>
<div class="hidden-lg">
elements 2
</div>
</div>
</div>
Agregar el CSS que se muestra a continuación a su aplicación Bootstrap 3 habilita el soporte para
pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right
clases que funcionan exactamente como el nuevo
float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right
clases que se han introducido en Bootstrap 4:
@media (min-width: 768px) {
.pull-sm-left {
float: left !important;
}
.pull-sm-right {
float: right !important;
}
.pull-sm-none {
float: none !important;
}
}
@media (min-width: 992px) {
.pull-md-left {
float: left !important;
}
.pull-md-right {
float: right !important;
}
.pull-md-none {
float: none !important;
}
}
@media (min-width: 1200px) {
.pull-lg-left {
float: left !important;
}
.pull-lg-right {
float: right !important;
}
.pull-lg-none {
float: none !important;
}
}
.pull-none {
float: none !important;
}
Aparte de eso, agrega
pull-{ε|sm-|md-|lg-}none
para completar, ser compatible con
float-{ε|sm-|md-|lg-|xl-}none
de Bootstrap 4.
Este problema se resuelve en bootstrap-4-alpha-2.
Aquí está el enlace: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/
Clonarlo en github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2
Esto es lo que estoy usando. change @ screen-md-max para otros tamaños
/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
.pull-xs-right {
float: right !important;
}
.pull-xs-left {
float: left !important;
}
.radio-inline.pull-xs-left + .radio-inline.pull-xs-left ,
.checkbox-inline.pull-xs-left + .checkbox-inline.pull-xs-left {
margin-left: 0;
}
.radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
margin-right: 10px;
}
}
Funciona bien también:
/* small screen portrait */
@media (max-width: 321px) {
.pull-right {
float: none!important;
}
}
/* small screen lanscape */
@media (max-width: 480px) {
.pull-right {
float: none!important;
}
}
No es necesario crear su propia clase con consultas de medios. Bootstrap 3 ya tiene orden flotante para los puntos de corte de medios en Pedido de columna: http://getbootstrap.com/css/#grid-column-ordering
La sintaxis para la clase es col-<#grid-size>-(push|pull)-<#cols>
donde <#grid-size>
es xs, sm, md o lg y <#cols>
es lo lejos que desea la columna para mover para ese tamaño de cuadrícula. Empujar o tirar es izquierda o derecha, por supuesto.
Lo uso todo el tiempo, así sé que funciona bien.
Para aquellos interesados en la alineación de texto, una solución simple es crear una nueva clase:
.text-right-large {
text-align: right;
}
@media (max-width: 991px) {
.text-right-large {
text-align: left;
}
}
Luego agrega esa clase:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6 text-right-large">
elements 2
</div>
</div>
Pruebe este fragmento MENOS (Se creó a partir de los ejemplos anteriores y de la mezcla de consultas de medios en grid.less).
@media (min-width: @screen-sm-min) {
.pull-right-sm {
float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
float: right;
}
}
Puede poner "element 2" en una columna más pequeña (es decir: col-2
) y luego usar push
en pantallas más grandes solamente:
<div class="row">
<div class="col-lg-6 col-xs-6">elements 1</div>
<div class="col-lg-6 col-xs-6">
<div class="row">
<div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
<div class="pull-right">elements 2</div>
</div>
</div>
</div>
</div>
Demostración: http://bootply.com/88095
Otra opción es anular el flotador de .pull-right
utilizando una consulta @media.
@media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}
Por último, otra opción es crear su propia clase de CSS .pull-right-lg
.
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
ACTUALIZAR
Bootstrap 4 incluye flotadores receptivos , por lo que en este caso solo usarás float-lg-right
.
No se necesita CSS adicional .
Puede usar "empujar y tirar" para cambiar el orden de las columnas. Tira de una columna y empuja la otra en dispositivos grandes:
<div class="row">
<div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
<div class="col-lg-6 col-md-6 col-lg-push-6">
<div>
elements 2
</div>
</div>
</div>
ahora incluye bootstrap 4:
@import url(''https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css'');
y el código debería ser así:
<div class="row">
<div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
<div class="col-lg-6 col-md-6" style="border:solid 1px red">
<div class="pull-lg-right pull-xl-right">
elements 2
</div>
</div>
</div>
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
float: right;
}
.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
float: left;
}
@media (max-width: 767px) {
.pull-right-not-xs, .pull-left-not-xs{
float: none;
}
.pull-right-xs {
float: right;
}
.pull-left-xs {
float: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pull-right-not-sm, .pull-left-not-sm{
float: none;
}
.pull-right-sm {
float: right;
}
.pull-left-sm {
float: left;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.pull-right-not-md, .pull-left-not-md{
float: none;
}
.pull-right-md {
float: right;
}
.pull-left-md {
float: left;
}
}
@media (min-width: 1200px) {
.pull-right-not-lg, .pull-left-not-lg{
float: none;
}
.pull-right-lg {
float: right;
}
.pull-left-lg {
float: left;
}
}