Source

Float

Bizning sezgir float yordamchi dasturlarimizdan foydalanib, istalgan elementda, istalgan to'xtash nuqtasi bo'ylab floatlarni almashtiring.

Umumiy koʻrinish

Ushbu yordamchi dastur sinflari elementni chapga yoki o'ngga surib qo'yadi yoki CSS floatxususiyatidan foydalangan holda joriy ko'rish oynasi o'lchamiga asoslanib, suzishni o'chiradi . !importanto'ziga xoslik bilan bog'liq muammolarni oldini olish uchun kiritilgan. Ular bizning panjara tizimimiz bilan bir xil ko'rish oynasining to'xtash nuqtalaridan foydalanadi. Shuni yodda tutingki, float yordam dasturlari moslashuvchan elementlarga ta'sir qilmaydi.

Sinflar

Floatni sinf bilan almashtiring:

Barcha ko'rish oynasi o'lchamlarida chapga suzib o'ting

Barcha ko'rish oynasi o'lchamlarida o'ngga suzib yuring

Barcha ko'rish oynasi o'lchamlarida suzmang 
<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>

Aralashmalar

Yoki Sass mixin tomonidan:

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

Javobgar

floatHar bir qiymat uchun javob beruvchi o'zgarishlar ham mavjud .

SM (kichik) yoki kengroq o'lchamdagi ko'rish oynalarida chapga suzib qo'ying

MD (oʻrta) yoki kengroq oʻlchamdagi koʻrish oynalarida chapga suzib qoʻying

LG (katta) yoki kengroq o'lchamdagi ko'rish oynalarida chapga suzib qo'ying

XL (o'ta katta) yoki kengroq o'lchamdagi ko'rish oynalarida chapga suzib qo'ying 

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

Bu erda barcha yordam darslari;

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