Lumutang

I-toggle ang mga float sa anumang elemento, sa anumang breakpoint, gamit ang aming tumutugon na float utilities.

Sa pahinang ito

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 floatproperty . !importantay 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.

Float start sa lahat ng laki ng viewport

Float na dulo sa lahat ng laki ng viewport

Huwag lumutang sa lahat ng laki ng viewport

html

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

Float start sa mga viewport na may sukat na SM (maliit) o mas malawak

Float start sa mga viewport na may sukat na MD (medium) o mas malawak

Float start sa mga viewport na may sukat na LG (malaki) o mas malawak

Float start sa mga viewport na may sukat na XL (sobrang laki) o mas malawak

html

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