Source

Хөвөгч

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

Тойм

Эдгээр хэрэглээний ангиуд нь 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Утга бүрт хариу үйлдэл үзүүлэх өөрчлөлтүүд бас байдаг .

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