Source

Batmadan yüzmek

Duyarlı kayan nokta yardımcı programlarımızı kullanarak herhangi bir öğede, herhangi bir kesme noktasında kayan nokta arasında geçiş yapın.

genel bakış

Bu yardımcı program sınıfları, CSS floatözelliğini kullanarak geçerli görüntü alanı boyutuna bağlı olarak bir öğeyi sola veya sağa kaydırır veya kayan özelliği devre dışı bırakır . !importantözgüllük sorunlarından kaçınmak için dahil edilmiştir. Bunlar, ızgara sistemimizle aynı görünüm alanı kesme noktalarını kullanır. Float yardımcı programlarının esnek öğeler üzerinde hiçbir etkisi olmadığını lütfen unutmayın.

sınıflar

Bir sınıfla bir şamandıra arasında geçiş yapın:

Tüm görüntü alanı boyutlarında sola kayar

Tüm görüntü alanı boyutlarında sağa kayar

Tüm görüntü alanı boyutlarında yüzmeyin
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

karışımlar

Veya Sass mixin ile:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Duyarlı

floatHer değer için duyarlı varyasyonlar da mevcuttur .

SM (küçük) veya daha geniş görünüm alanlarında sola kayar

MD (orta) veya daha geniş görünüm alanlarında sola kayar

LG (büyük) veya daha geniş görünüm pencerelerinde sola kaydırın

XL (ekstra büyük) veya daha geniş görünüm pencerelerinde sola kaydırın

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

İşte tüm destek sınıfları;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none