in English
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.
Trên trang này
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 linh hoạt.
Bắt đầu nổi trên tất cả các kích thước cửa sổ xem
Kết thúc nổi trên tất cả các kích thước khung nhìn
Không trôi nổi trên tất cả các kích thước khung nhìn
<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>
Phản ứng nhanh nhẹn
Các biến thể đáp ứng cũng tồn tại cho mỗi float
giá trị.
Bắt đầu nổi trên khung nhìn có kích thước SM (nhỏ) hoặc rộng hơn
Bắt đầu nổi trên khung nhìn có kích thước MD (trung bình) hoặc rộng hơn
Bắt đầu nổi trên khung nhìn có kích thước LG (lớn) hoặc rộng hơn
Bắt đầu nổi trên khung nhìn có kích thước XL (cực lớn) hoặc rộng hơn
<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>
Dưới đây là tất cả các lớp hỗ trợ:
.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
API tiện ích
Các tiện ích nổi được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss
. Tìm hiểu cách sử dụng API tiện ích.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),