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. Xin lưu ý rằng các tiện ích float không có tác dụng đối với các mặt hàng flex.

Các lớp học

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

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

<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