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>

Миксиндер

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

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

Жооптуу

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

<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