Source

Pantap

Toggle floats pan ɛni elemɛnt, akɔdin to ɛni brekpɔynt, yuz wi rispɔnsiv flot yutiliti dɛn.

Ɔvaviu fɔ di Baybul

Dɛn yutiliti klas ya de flot wan ɛlimɛnt na di lɛft ɔ rayt, ɔ disable flotin, bay di kɔrɛnt viupɔt saiz we de yuz di CSS floatprɔpati . !importantna inklud fɔ avɔyd spɛsifisiti kwɛshɔn dɛn. Dɛn wan ya de yuz di sem viewport brekpoint dɛn we wi grid sistem de yuz. Duya una no se flot yutiliti nɔ gɛt ɛni afɛkt pan fleks tin dɛn.

Klas dɛn

Toggle wan flot wit wan klas:

Flot na di lɛft pan ɔl di sayz dɛn fɔ di viupɔt

Flot rayt pan ɔl di sayz dɛn fɔ di viupɔt

Nɔ flot pan ɔl di sayz dɛn fɔ di viupɔt
<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>

Mixin dɛn

Ɔ bay Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Fɔ ansa

Rispכnsiv vεryushכn dεm de bak fכ εvri floatvalyu.

Flot na di lɛft pan viupɔt dɛn we gɛt saiz SM (smɔl) ɔ we big pas dat

Flot na di lɛft pan viupɔt dɛn we gɛt saiz MD (midul) ɔ we big pas dat

Flot na di lɛft pan viupɔt dɛn we gɛt saiz LG (big) ɔ we big pas dat

Flɔt na di lɛft pan viupɔt dɛn we gɛt sayz XL (ɛkstra-big) ɔ we big pas dat

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

Na ɔl di sɔpɔt klas dɛn ya;

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