O que aconteceu com as classes .pull-left e .pull-right no Bootstrap 4?

Na versão mais recente, pull-left e pull-right foram substituídos por .pull- {xs, sm, md, lg, xl} - {left, right, none}

Isso significa que em vez de escrever um simples class="pull-right", terei agora que escreverclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Existe uma maneira menos tediosa de fazer isso?

Em 2016, quando esta pergunta foi feita originalmente, a resposta foi:

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

Mas agora a resposta aceita deve ser a de Robert Went.

As aulas são float-right float-sm-rightetc.

As consultas de mídia priorizam os dispositivos móveis, portanto, o uso float-sm-rightafetaria tamanhos de tela pequenos e qualquer coisa mais larga, portanto, não há razão para adicionar uma classe para cada largura. Basta usar a menor tela que deseja afetar ou float-rightpara todas as larguras de tela.

Documentos oficiais:

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

Atualizando: https://getbootstrap.com/docs/4.4/migration/#utilities

Se estiver atualizando um projeto existente com base em uma versão anterior do Bootstrap, você pode usar sass extend para aplicar as regras aos nomes de classe antigos:

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

Atualização 2018 (a partir do Bootstrap 4.1)

Sim, pull-lefte pull-rightforam substituídos por float-lefte float-rightno Bootstrap 4.

No entanto, os floats não funcionarão em todos os casos, pois o Bootstrap 4 agora é flexbox .

Para crianças flexbox align para a direita, de uso auto-margens (ou seja: ml-auto) ou os utils flexbox (ie: justify-content-end,align-self-end , etc ..).

Exemplos

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>

Migalhas de pão:

<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

Rede:

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>

Alterado para float-right float-left float-xx-leftefloat-xx-right

Se você quiser usar aqueles com colunas em outro trabalho com col-*classes, você pode usar order-*classes.

Você pode controlar a ordem de suas colunas com classes de ordem. veja mais em documentação do Bootstrap 4

Uma simples documentação de bootstrap:

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

Thay são removidos.

Use em float-leftvez de pull-left. E em float-rightvez de pull-right.

Verifique a documentação do bootstrap aqui :

Adicionadas as classes .float- {sm, md, lg, xl} - {left, right, none} para flutuadores responsivos e removidas .pull-left e .pull-right, uma vez que são redundantes para .float-left e .float- certo.

Consegui fazer isso com as seguintes classes em meu projeto

d-flex justify-content-end

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

Nada mais estava funcionando para mim. Este sim. Isso pode ajudar alguém.

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

Envolver tudo em clearfix div é a chave.

bootstrap-4 adiciona classe float-left ou right para flutuar

Para qualquer outra pessoa e apenas um acréscimo a Robert, se o seu nav tiver o valor de exibição flexível, você pode flutuar o elemento de que precisa para a direita, adicionando-o ao css

{
    margin-left: auto;
}