Denne artikkelen vil eksemplifisere metoden for å bruke bruddpunkter og mediespørringer på de 'klare' verktøyene i Tailwind.
Hvordan bruke bruddpunkter og medieforespørsler på 'clear' i Tailwind?
For å bruke bestemte bruddpunkter og mediespørringer på 'klare' verktøy i Tailwind, lag en HTML-struktur. Deretter definerer du ønsket verdi til ' klar-
Eksempel
I dette eksemplet vil vi bruke ' md ' bruddpunkt med ' klar-begge ' verktøy og ' lg ' bruddpunkt med ' klar-ingen ' verktøyet i ' '-element for å endre posisjonen på middels og stor skjermstørrelse:
< kropp >
< div klasse = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' klasse = 'float-venstre p-3 w-28 h-24' alt = 'bilde' / >
< img src = 'tailwindcss_img.png' klasse = 'flyte-høyre p-3' alt = 'bilde' / >
< s klasse = 'text-justify clear-venstre md:clear-both lg:clear-none' > Tailwind CSS tilbyr 'floats'-verktøy for å kontrollere innpakningen av innhold rundt et element.
Dette eksemplet viser hvordan du bruker bruddpunkter og mediespørringer med 'clear'-verktøyet i Tailwind. < / s >
< / div >
< / kropp >
Her:
- 'flyte-venstre' klasse flyter elementene til containerens venstre side.
- 'flyte-høyre' klasse flyter elementene til beholderens høyre side.
- 'klart-venstre' klasse flytter
-elementet under det venstreflytende elementet i beholderen.
- 'md:slett-begge' klasse sletter både venstre og høyre flyter og plasserer
-elementet under dem på middels skjermstørrelse.
- «lg:clear-none» klasse deaktiverer all clear brukt på
-elementet og lar elementet flyte på begge sider av beholderen i en stor skjermstørrelse.
Produksjon
I henhold til utdataene ovenfor har de spesifiserte bruddpunktene og mediespørringene blitt brukt på 'clear'-verktøyet.
Konklusjon
For å bruke bruddpunkter og mediespørringer på 'klare' verktøy i Tailwind, definer ønsket verdi til ' klar-