in English
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.
Mga klase
I-toggle ang float gamit ang isang klase:
Lutang sa kaliwa sa lahat ng laki ng viewport
Lutang pakanan sa lahat ng laki ng viewport
Huwag lumutang sa lahat ng laki ng viewport
<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>
Mixins
O sa pamamagitan ng Sass mixin:
.element {
@include float-left;
}
.another-element {
@include float-right;
}
.one-more {
@include float-none;
}
Tumutugon
Umiiral din ang mga tumutugong variation para sa bawat float
value.
Lumutang pakaliwa sa mga viewport na may sukat na SM (maliit) o mas malawak
Lutang pakaliwa sa mga viewport na may sukat na MD (medium) o mas malawak
Lumutang pakaliwa sa mga viewport na may sukat na LG (malaki) o mas malawak
Lumutang pakaliwa sa mga viewport na may sukat na XL (sobrang laki) o mas malawak
<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>
Narito ang lahat ng mga klase ng suporta;
.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