Ovaj će članak ilustrirati metodu primjene prijelomnih točaka i medijskih upita na 'očisti' pomoćne programe u Tailwindu.
Kako koristiti prijelomne točke i medijske upite na 'clear' u Tailwindu?
Za primjenu određenih prijelomnih točaka i medijskih upita na 'čiste' pomoćne programe u Tailwindu, stvorite HTML strukturu. Zatim definirajte željenu vrijednost na ' jasno-
Primjer
U ovom primjeru koristit ćemo ' doktor medicine ' prijelomna točka s ' jasno-oboje 'uslužni program i' lg ' prijelomna točka s ' jasna-nikakva ' uslužni program u ' ” za promjenu položaja na srednjoj i velikoj veličini zaslona:
< tijelo >
< div razreda = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' razreda = 'float-lijevo p-3 w-28 h-24' sve = 'slika' / >
< img src = 'tailwindcss_img.png' razreda = 'float-desno p-3' sve = 'slika' / >
< str razreda = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS pruža 'lebdeće' uslužne programe za kontrolu omatanja sadržaja oko elementa.
Ovaj primjer će pokazati kako koristiti prijelomne točke i medijske upite s 'clear' uslužnim programom u Tailwindu. < / str >
< / div >
< / tijelo >
Ovdje:
- “float-lijevo” klasa pomiče elemente na lijevu stranu spremnika.
- 'plutajući desno' klasa pomiče elemente na desnu stranu spremnika.
- “jasno-lijevo” klasa pomiče
element ispod lijevo lebdećeg elementa u spremniku.
- “md:oboje” klasa briše i lijeve i desne lebdeće i pozicionira
element ispod njih na ekranu srednje veličine.
- 'lg: jasno-ništa' klasa onemogućuje bilo kakvo brisanje primijenjeno na element
i omogućuje elementu da lebdi na obje strane spremnika na velikoj veličini zaslona.
Izlaz
Prema gornjem izlazu, navedene prijelomne točke i medijski upiti uspješno su primijenjeni na uslužni program 'očisti'.
Zaključak
Za primjenu prijelomnih točaka i medijskih upita na 'clear' uslužnim programima u Tailwindu, definirajte željenu vrijednost za ' jasno-