Source

Trôi nổi

Chuyển đổi float trên bất kỳ phần tử nào, trên bất kỳ điểm ngắt nào, bằng cách sử dụng các tiện ích float đáp ứng của chúng tôi.

Tổng quan

Các lớp tiện ích này làm nổi một phần tử sang trái hoặc phải hoặc tắt tính năng nổi, dựa trên kích thước khung nhìn hiện tại bằng cách sử dụng thuộc tính CSSfloat . !importantđược đưa vào để tránh các vấn đề về tính cụ thể. Chúng sử dụng các điểm ngắt khung nhìn giống như hệ thống lưới của chúng tôi.

Các lớp học

Chuyển đổi float với một lớp:

Di chuyển sang trái trên tất cả các kích thước cửa sổ xem

Nổi ngay trên tất cả các kích thước cửa sổ xem

Không trôi nổi trên tất cả các kích thước khung nhìn
<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>

Mixin

Hoặc bởi Sass mixin:

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

Phản ứng nhanh nhẹn

Các biến thể đáp ứng cũng tồn tại cho mỗi floatgiá trị.

Di chuyển sang trái trên các cửa sổ xem có kích thước SM (nhỏ) hoặc rộng hơn

Di chuyển sang trái trên các cửa sổ xem có kích thước MD (trung bình) hoặc rộng hơn

Di chuyển sang trái trên các cửa sổ xem có kích thước LG (lớn) hoặc rộng hơn

Di chuyển sang trái trên cửa sổ xem có kích thước XL (cực lớn) hoặc rộng hơn

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

Đây là tất cả các lớp hỗ trợ;

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