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



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


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

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

¡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.


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

}

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.


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>

2

Es muy simple usar Sass, solo usa @extend:

.pull-right-xs { 
    @extend .pull-right;
 }

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


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>

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>

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.