Trôi nổ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.

<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 floatgiá trị.

<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

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