Avbazîn

Li ser her hêmanekê, li ser her xala veqetînê, bi karanîna karûbarên meya float-a bersivdar ve float bişoxilînin.

Li ser vê rûpelê

Têgihiştinî

Van çînên karûbar li ser bingeha mezinahiya dîmendera heyî bi karanîna taybetmendiya CSS-float ê hêmanek çepê an rastê diherikînin, an levkirinê neçalak dikin . !importanttê de ye ku ji pirsgirêkên taybetî dûr nekevin. Van heman xalên şikestinê yên wekî pergala meya torê bikar tînin. Ji kerema xwe hay jê hebin ku karûbarên float bandorek li ser hêmanên flex nakin.

Float li ser hemî pîvanên dîmenderê dest pê dike

Li ser hemî mezinahiyên porta dîtinê bi dawî dibe

Li ser hemî mezinahiyên dîmenderê neherikin

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

Pêrakirin

Guhertoyên bersivdar jî ji bo her floatnirxê hene.

Float li ser dîmenderên mezinahiya SM (biçûk) an berfirehtir dest pê dike

Float li ser dîmenderên mezinahiya MD (navîn) an berfirehtir dest pê dike

Float li ser dîmenderên mezinahiya LG (mezin) an berfirehtir dest pê dike

Float li ser dîmenderên mezinahiya XL (zêde-mezin) an berfirehtir dest pê dike

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

Li vir hemî dersên piştgirî hene:

.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

Karûbarên Float di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.

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