Source

Float

Каалаган элементте, каалаган үзгүлтүккө учуроо чектеринде, биздин жооп берүүчү флот утилиталарыбызды колдонуп, сүзүп коюңуз.

Обзор

Бул пайдалуу класстар элементти солго же оңго сүзөт же CSS floatкасиетин колдонуу менен учурдагы көрүнүштүн өлчөмүнө жараша калкып чыгууну өчүрөт . !importantконкреттүүлүк маселелерин болтурбоо үчүн киргизилген. Булар биздин тор тутумубуз сыяктуу эле көрүү портунун үзүү чекиттерин колдонушат.

Класстар

Класс менен флотту которуштуруу:

Бардык көрүү терезесинин өлчөмдөрүндө солго сүзүү

Көрүү портунун бардык өлчөмдөрүндө оңго сүзүү

Көрүү портунун бардык өлчөмдөрүндө сүзбөңүз 
<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>

Mixins

Же Sass mixin тарабынан:

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

Жооптуу

floatАр бир маани үчүн жооп берүүчү вариациялар да бар .

SM (кичинекей) же кененирээк өлчөмдөгү көрүү портторунда солго сүзүү

MD (орто) же кененирээк өлчөмдөгү көрүү портторунда солго сүзүү

LG (чоң) же кененирээк өлчөмдөгү көрүү портторунда солго сүзүү

Өлчөмү XL (чоңураак) же кененирээк көрүү портторунда солго сүзүү 

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

Бул жерде бардык колдоо класстары;

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