Lumutang
I-toggle ang mga float sa anumang elemento, sa anumang breakpoint, gamit ang aming tumutugon na float utilities.
Pangkalahatang-ideya
Ang mga utility class na ito ay lumulutang ng isang elemento sa kaliwa o kanan, o hindi paganahin ang lumulutang, batay sa kasalukuyang laki ng viewport gamit ang CSS float
property . !important
ay kasama upang maiwasan ang mga isyu sa pagtitiyak. Ang mga ito ay gumagamit ng parehong viewport breakpoints gaya ng aming grid system. Mangyaring magkaroon ng kamalayan na ang mga float utilities ay walang epekto sa mga flex item.
<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>
Tumutugon
Umiiral din ang mga tumutugong variation para sa bawat float
value.
<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>
Narito ang lahat ng mga klase ng suporta:
.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
Utilities API
Ang mga float utility ay idineklara sa aming mga utility API sa scss/_utilities.scss
. Matutunan kung paano gamitin ang utility API.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),