¿Qué pasó con las clases .pull-left y .pull-right en Bootstrap 4?

En la versión más reciente, pull-left y pull-right han sido reemplazados por .pull- {xs, sm, md, lg, xl} - {left, right, none}

Eso significa que en lugar de escribir un simple class="pull-right", ahora tendré que escribirclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

¿Hay alguna forma menos tediosa de hacerlo?

En 2016, cuando se hizo esta pregunta originalmente, la respuesta fue:

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

Pero ahora la respuesta aceptada debería ser la de Robert Went.

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

Las consultas de medios son para dispositivos móviles primero, por lo que su uso float-sm-rightafectaría a los tamaños de pantalla pequeños y cualquier cosa más ancha, por lo que no hay razón para agregar una clase para cada ancho. Simplemente use la pantalla más pequeña que desea afectar o float-rightpara todos los anchos de pantalla.

Documentos oficiales:

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

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

Si está actualizando un proyecto existente basado en una versión anterior de Bootstrap, puede usar sass extend para aplicar las reglas a los nombres de clases anteriores:

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

Actualización 2018 (a partir de Bootstrap 4.1)

Sí, pull-lefty pull-righthan sido sustituidos por float-lefty float-righten Bootstrap 4.

Sin embargo, los flotadores no funcionarán en todos los casos ya que Bootstrap 4 ahora es flexbox .

Para alinear los niños FlexBox A la derecha, el uso de automóviles márgenes (es decir: ml-auto) o las utilidades FlexBox (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>

Migas de pan:

<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">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>

Cambiado a float-right float-left float-xx-leftyfloat-xx-right

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

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

Un 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>

Se eliminan.

Utilizar en float-leftlugar de pull-left. Y en float-rightlugar de pull-right.

Consulte la documentación de bootstrap aquí :

Se agregaron clases .float- {sm, md, lg, xl} - {left, right, none} para flotantes receptivos y se eliminaron .pull-left y .pull-right ya que son redundantes para .float-left y .float- Derecha.

Pude hacer esto con las siguientes clases en mi proyecto

d-flex justify-content-end

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

Nada más funcionaba para mí. Este lo hizo. Esto podría 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.

bootstrap-4 agrega clase float-left o right para flotar

Para cualquier otra persona y solo una adición a Robert, si su navegador tiene un valor de visualización flexible, puede hacer flotar el elemento que necesita a la derecha, agregando esto a su css

{
    margin-left: auto;
}