Хөвөгч

Манай мэдрэмжтэй хөвөх хэрэгслүүдийг ашиглан дурын элемент дээр, ямар ч таслах цэг дээр хөвөгчийг сэлгэх.

Энэ хуудсан дээр

Тойм

Эдгээр хэрэглээний ангиуд нь CSS floatшинж чанарыг ашиглан одоогийн харах цонхны хэмжээн дээр тулгуурлан элементийг зүүн эсвэл баруун тийш хөвөх эсвэл хөвөхийг идэвхгүй болгодог. !importantонцлогтой холбоотой асуудлаас зайлсхийхийн тулд оруулсан болно. Эдгээр нь манай сүлжээний системтэй ижил харагдах хэсгийн таслах цэгүүдийг ашигладаг. Хөвөгч хэрэгсэл нь уян хатан зүйлд ямар ч нөлөө үзүүлэхгүй гэдгийг анхаарна уу.

Бүх харах цонхны хэмжээн дээр хөвөх эхлэл

Бүх харах хэсэг дээр хөвөх төгсгөл

Бүх харах цонхны хэмжээ дээр бүү хөв

html

<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 (хэт том) эсвэл түүнээс дээш хэмжээтэй харах цонхон дээр хөвөх эхлэл

html

<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

Сасс

Utilities API

Float хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss. API хэрэгслүүдийг хэрхэн ашиглах талаар суралц.

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