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:

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

<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