in English

Float

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

Бул бетте

Обзор

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

Бардык көрүү терезелеринин өлчөмдөрүндө флоат баштоо

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

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

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Жооптуу

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

SM (кичинекей) же кененирээк өлчөмдөгү көрүү портторунда флоат башталышы

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

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

XL (чоң) же кененирээк өлчөмдөгү көрүү портторунда флоат башталышы

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

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

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

Utilities API

Float утилиталары биздин API-де жарыяланган scss/_utilities.scss. API утилиталарын кантип колдонууну үйрөнүңүз.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),