Source

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

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

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