Bootstrap 4'teki .pull-left ve .pull-right sınıflarına ne oldu?

En yeni sürümde, sola çekme ve sağa çekme, .pull- {xs, sm, md, lg, xl} - {left, right, none} ile değiştirildi

Bu, basit bir class="pull-right"şeyler yazmak yerine şimdi yazmak zorunda kalacağım anlamına gelir.class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Bunu yapmanın daha az sıkıcı bir yolu var mı?

2016'da bu soru ilk sorulduğunda cevap şuydu:

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

Ama şimdi kabul edilen cevap Robert Went'in olmalı.

Sınıflar float-right float-sm-rightvb.

Medya sorguları mobil önceliklidir, bu nedenle kullanmak float-sm-rightküçük ekran boyutlarını ve daha geniş her şeyi etkileyebilir, bu nedenle her genişlik için bir sınıf eklemenin bir nedeni yoktur. Etkilemek istediğiniz en küçük ekranı veya float-righttüm ekran genişlikleri için kullanın.

Resmi Belgeler:

Sınıflar: https://getbootstrap.com/docs/4.4/utilities/float/

Güncelleme: https://getbootstrap.com/docs/4.4/migration/#utilities

Mevcut bir projeyi Bootstrap'in önceki bir sürümüne göre güncelliyorsanız, kuralları eski sınıf adlarına uygulamak için sass extended'ı kullanabilirsiniz:

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

2018 Güncellemesi (Bootstrap 4.1 itibariyle)

Evet, pull-leftve pull-rightile yerini almış float-leftve float-rightBootstrap 4'te.

Ancak, yüzer Bootstrap 4 şimdi olduğundan her durumda işe yaramaz FlexBox .

Doğru, kullanım otomatik marjlar (yani: üzere hizalama FlexBox Çocuklarına ml-auto) ya da FlexBox utils (yani: justify-content-end, align-self-endvb ..).

Örnekler

Gezinmeler:

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

Galeta unu:

<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

Kafes:

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

Olarak değiştirildi float-right float-left float-xx-leftvefloat-xx-right

Sütunlu olanları col-*sınıflarla başka bir çalışmada kullanmak istiyorsanız, order-*sınıfları kullanabilirsiniz .

Sıra sınıfları ile sütunlarınızın sırasını kontrol edebilirsiniz. Bootstrap 4 belgelerinde daha fazlasını görün

Önyükleme belgelerinden basit:

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

Onlar kaldırılır.

float-leftBunun yerine kullanın pull-left. Ve float-rightyerine pull-right.

Bootstrap Belgelerini buradan kontrol edin :

Duyarlı kaymalar için .float- {sm, md, lg, xl} - {left, right, none} sınıfları eklendi ve .float-left ve .float- için gereksiz olduklarından .pull-left ve .pull-right kaldırıldı sağ.

Benim için başka hiçbir şey çalışmıyordu. Bu yaptı. Bu birine yardımcı olabilir.

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

Her şeyi clearfix div ile sarmalamak anahtardır.

Bunu projemdeki aşağıdaki sınıflarla yapabildim

d-flex justify-content-end

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

bootstrap-4 float-sol veya sağ kayan için sınıf ekle

Başkaları için ve sadece Robert'a bir ek için, Navigasyonunuzun esnek görüntüleme değeri varsa, ihtiyacınız olan öğeyi css'sine ekleyerek sağa kaydırabilirsiniz.

{
    margin-left: auto;
}