right left float div bootstrap align css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

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.



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 .

Demostración de Bootstrap 4


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; } }