Lutaw

I-toggle ang float sa bisan unsang elemento, sa bisan unsang breakpoint, gamit ang among responsive float utilities.

Niini nga panid

Overview

Kini nga mga klase sa utility naglutaw sa usa ka elemento sa wala o tuo, o nagpugong sa paglutaw, base sa kasamtangan nga gidak-on sa viewport gamit ang CSS floatproperty . !importantgilakip aron malikayan ang mga isyu sa espesipiko. Kini naggamit sa parehas nga viewport breakpoints sama sa among grid system. Palihug hibaloi nga ang float utilities walay epekto sa mga butang nga flex.

Pagsugod sa float sa tanang gidak-on sa viewport

Lutaw nga katapusan sa tanan nga mga gidak-on sa viewport

Ayaw paglutaw sa tanang gidak-on sa viewport

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

Makatubag

Adunay usab mga responsive nga mga kalainan alang sa matag floatkantidad.

Pagsugod sa float sa mga viewport nga may gidak-on nga SM (gamay) o mas lapad

Pagsugod sa float sa mga viewport nga may gidak-on nga MD (medium) o mas lapad

Pagsugod sa float sa mga viewport nga gidak-on sa LG (dako) o mas lapad

Pagsugod sa paglutaw sa mga viewport nga gidak-on sa XL (labi ka dako) o mas lapad

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

Ania ang tanan nga mga klase sa 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 utilities gideklarar sa among mga utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga utilities API.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),