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

103

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?

Kevin J
fonte
5
Parece que você não entendeu muito bem a primeira abordagem móvel. .pull-xs-rightfaria com que o objeto flutuasse diretamente em todos os tamanhos de tela, uma vez que o css também desce em cascata para dispositivos maiores. PS Talvez tenha mudado nas versões mais recentes, mas você deveria estar usando em .float-rightvez de .pull-right.
Phill Healey

Respostas:

15

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.

Phillip Senn
fonte
8
.float-{sm,md,lg,xl}-{left,right,none}agora flutua para a esquerda / direita / nenhum, enquanto .pull-lefte .pull-rightforam removidos.
Mirko
1
pull-right está de volta, mas se esse fosse o caso, use css.pull-right{@extend .pull-xs-right;}
Alexis
4
Esta foi respondida em 09/2016. A resposta correta agora é de Robert Went.
Phillip Senn
9
Parece difícil obter 21 votos negativos para uma resposta que acabou de ser preterida?
LeonardChallis
@PhillipSenn considere atualizar sua resposta para que você não perca pontos por ser um jogador de equipe.
wizulus
212

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;
}
Robert foi
fonte
25

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>
Zim
fonte
3
ml-auto é exatamente o que eu precisava no meu navbar
ckapilla
16

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

MAMADOU YAYA DIALLO
fonte
6

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>
Behnam Azimi
fonte
Isso funcionou. Por algum motivo pull-righte pull-leftnão funcionam em colunas de grade em4.1
Kunal
1
Está certo. A ordem é a maneira como você recriaria o push / pull nas linhas, já que as linhas agora usam o flexbox.
Gcamara14
5

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.

Usama
fonte
4

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">
Mallek
fonte
4

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.

Ojas Kale
fonte
Você tem 2 itens embutidos, então eles precisam estar em um elemento de bloco para serem flutuados em relação a seus irmãos.
Robert foi em
0

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

Arsalan Ahmad Khan
fonte
1
Bem-vindo ao Stack Overflow! Infelizmente, esta postagem não parece fornecer uma resposta de qualidade para a pergunta. Edite sua resposta e tente fornecer mais detalhes.
sɐunıɔ ןɐ qɐp
-1

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;
}
mbougarne
fonte
Também há aulas para isso ml-autoemr-auto
Robert Went