¿Qué pasó con el .tire de la izquierda y .tire de la derecha clases de Bootstrap 4?

En la versión más reciente de la extracción de la izquierda y tire de la derecha han sido reemplazados por .pull-{xs,sm,md,lg,xl}-{izquierda,derecha,none}

Que significa que en lugar de escribir una simple class="pull-right", voy a tener ahora para escribir class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Hay menos tedioso manera de hacerlo?

  • Parece que no has entendido el móvil de primera aproximación. .pull-xs-right podría causar que el objeto flotante a la derecha en todos los tamaños de pantalla, desde el css cascadas hacia arriba, hacia los dispositivos más grandes también. P. s. Tal vez ha cambiado en las versiones más recientes, pero las que usted debe utilizar .float-right en lugar de .pull-right.
InformationsquelleAutor Kevin J | 2016-09-23

10 Kommentare

  1. 13

    De vuelta en el 2016 cuando esta pregunta se pidió originalmente, la respuesta fue:

    $('.pull-right').addClass('pull-xs-right').removeClass('pull-right')
    

    Pero ahora aceptada la respuesta debe ser que Robert Fue el.

    • .float-{sm,md,lg,xl}-{left,right,none} ahora flota a la izquierda/derecha/ninguno, mientras que .pull-left y .pull-right se han eliminado.
    • tire de la derecha está de vuelta, pero si ese hubiera sido el caso que acabamos de utilizar css .pull-right{@extend .pull-xs-right;}
    • Este fue respondida 9/2016. La respuesta correcta es ahora Robert se Fue la.
    • Parece áspero para obtener 21 de abajo votos para una respuesta que sólo en desuso?
    • considere la posibilidad de actualizar su respuesta para no perder puntos para ser un jugador de equipo.
    • Bueno, yo utiliza principalmente push/pull en mi cuadrícula… me encontré con que en bootstrap 4, la nueva aplicación fue el fin… Ya que es el uso de flexbox, despues de todo… getbootstrap.com/docs/4.0/layout/grid/#order-classes

  2. 195

    Las clases son float-right float-sm-right etc.

    Las consultas de medios móviles en el caso de la primera, así que el uso de float-sm-right afectaría a los pequeños tamaños de pantalla y nada más amplia, así que no hay razón para agregar una clase para cada ancho. Sólo uso de la más pequeña pantalla que se desea afectar o float-right para todos los anchos de pantalla.

    Oficial Docs:

    Clases: https://getbootstrap.com/docs/4.3/utilities/float/

    Actualización: https://getbootstrap.com/docs/4.3/migration/#utilities

    Si va a actualizar un proyecto existente basado en una versión anterior de Bootstrap, puede utilizar sass extender la aplicación de las normas a la antigua clase de los nombres de:

    .pull-right {
        @extend .float-right;
    }
    .pull-left {
        @extend .float-left;
    }
    
  3. 16

    Actualización de 2018 (como de Bootstrap 4.1)

    Sí, pull-left y pull-right han sido reemplazados con float-left y float-right en Bootstrap 4.

    Sin embargo, flota no funcionará en todos los casos desde el Bootstrap 4 es ahora flexbox.

    Para alinear flexbox los niños a la derecha, el uso de auto-márgenes (es decir: ml-auto) o el flexbox utils (es decir: justify-content-end, align-self-end, etc..).

    Ejemplos

    Navs:

    <ul class="nav">
       <li><a href class="nav-link">Link</a></li>
       <li><a href class="nav-link">Link</a></li>
       <li class="ml-auto"><a href class="nav-link">Right</a></li>
    </ul>
    

    Pan rallado:

    <ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li class="active"><a href="/">Link</a></li>
        <li class="ml-auto"><a href="/">Right</a></li>
    </ul>
    
    https://www.codeply.com/go/6ITgrV7pvL
    

    Cuadrícula:

    <div class="row">
        <div class="col-3">Left</div>
        <div class="col-3 ml-auto">Right</div>
    </div>
    
    • ml-auto es exactamente lo que yo necesitaba en mi navbar
  4. 5

    Si desea utilizar aquellos con columnas en otro trabajo con col-* clases, puede utilizar order-* clases.

    Puede controlar el orden de las columnas con el fin de las clases. ver más en Bootstrap 4 documentación

    Simple de bootstrap docs:

    <div class="container">
      <div class="row">
        <div class="col">
          First, but unordered
        </div>
        <div class="col order-12">
          Second, but last
        </div>
        <div class="col order-1">
          Third, but first
        </div>
      </div>
    </div>
    
    • Esto funcionó. Por alguna razón pull-right y pull-left no funcionan en columnas de cuadrícula en 4.1
    • Eso es correcto. El orden es la forma de recrear el push/pull en filas desde las filas ahora uso flexbox.
  5. 5

    Que se eliminan.

    Uso float-left en lugar de pull-left.
    Y float-right en lugar de pull-right.

    Verificación de la Documentación de bootstrap aquí:

    Añadido .float-{sm,md,lg,xl}-{izquierda,derecha,none} clases para responder
    flota y se retira .tire de la izquierda y .tire de la derecha, ya que son redundantes
    a .flotar a la izquierda y la .float-derecha.

  6. 4

    Yo era capaz de hacer esto con las siguientes clases en mi proyecto

    d-flex justify-content-end
    
    <div class="col-lg-6 d-flex justify-content-end">
    
  7. 4

    Nada más estaba trabajando para mí. Éste lo hizo. Esto puede ayudar a alguien.

    <div class="clearfix">
      <span class="float-left">Float left</span>
      <span class="float-right">Float right</span>
    </div>
    

    Envolver todo en clearfix div es la clave.

    • Tiene 2 elementos inline, por lo que deben ser en un elemento de bloque para ellos estar flotando en relación a sus hermanos.
  8. 0

    bootstrap-4 agregar la clase float-a la izquierda o a la derecha para flotación

    • Bienvenido a Desbordamiento de Pila! Por desgracia, este post no parece proporcionar un la calidad de la respuesta a la pregunta. Por favor, edita tu respuesta y tratar de dar más detalles.
  9. -1

    Para nadie y sólo una adición a Robert, Si su nav ha flex valor de la pantalla, puede flotar en el elemento que usted necesita a la derecha, por añadir esto a su css

    {
        margin-left: auto;
    }
    
    • También hay clases para este ml-auto y mr-auto

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea