Bootstrap 3: tire hacia la derecha solo para col-lg

127

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 estén alineados en pantallas más pequeñas que col-lg. Entonces, efectivamente, tener 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

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Thibs
fuente
3
Parece que esto podría ser una característica compatible en Bootstrap 4
eggy
Así que esto ahora es una cosa en Bootstrap 4 . Sólo tiene que utilizar order-lg-1, order-lg-2, etc.on sus columnas.
limfinity

Respuestas:

156

Puede poner el "elemento 2" en una columna más pequeña (es decir:) col-2y luego usarlo solo pushen pantallas más grandes:

<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 del .pull-rightuso de 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 .pull-right-lgclase CSS.

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

ACTUALIZAR

Bootstrap 4 incluye flotadores receptivos , por lo que en este caso simplemente usaría float-lg-right.
No se necesita CSS adicional .

Bootstrap 4 Demo

Zim
fuente
gracias por esto, pero el contenido debe usar los 6 cols completos, de lo contrario se envuelve, lo que no queremos.
Thibs
esperaba no tener una consulta de medios, pero lo hará. Gracias
Thibs
28

Pruebe este fragmento MENOS (Se creó a partir de los ejemplos anteriores y los mixins de consulta 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;
}
}
Mark P
fuente
Cavar esta solución ty!
Pez
3
Esto debe agregarse a bootstrap.
Lorem Ipsum Dolor
20 
.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;
    }
}
Coca
fuente
¡Agradable, esto debería ser parte del Bootstrap predeterminado!
Owen
12

No es necesario crear su propia clase con consultas de medios. Bootstrap 3 ya tiene pedidos flotantes para puntos de interrupción de medios en Ordenar columnas: http://getbootstrap.com/css/#grid-column-ordering

La sintaxis de la clase es col-<#grid-size>-(push|pull)-<#cols>donde <#grid-size>está xs, sm, md o lg y <#cols>es hasta qué punto desea que se mueva la columna para ese tamaño de cuadrícula. Empujar o tirar es izquierda o derecha, por supuesto.

Lo uso todo el tiempo, así que sé que funciona bien.

Quinn
fuente
3

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

}
Greg
fuente
3

Agregar el CSS que se muestra a continuación a su aplicación Bootstrap 3 permite la compatibilidad con

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

clases que funcionan exactamente como las nuevas

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.

graznar
fuente
2

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>
jchavannes
fuente
2

Es muy simple usar Sass, solo usa @extend:

.pull-right-xs { 
    @extend .pull-right;
 }
Rogerio Orioli
fuente
1

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;
    }
}
aWebDeveloper
fuente
1

¡Solo use las clases de utilidad receptiva 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 lgpantallas; en el resto, el displayatributo se configurará blockcomo está por defecto para el divelemento. Este enfoque está usando la text-rightclase en el elemento padre en lugar de pull-right.

Solución alternativa:

La mayor desventaja es que el código html interno 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>
luke
fuente
1

Puede usar push and pull 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>
Carlos Ucha
fuente
0

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>
Vasile
fuente