Denne artikel vil eksemplificere metoden til at anvende breakpoints og medieforespørgsler på de 'klare' hjælpeprogrammer i Tailwind.
Hvordan kan man bruge brudpunkter og medieforespørgsler på 'clear' i Tailwind?
For at anvende bestemte brudpunkter og medieforespørgsler på 'klare' hjælpeprogrammer i Tailwind skal du oprette en HTML-struktur. Definer derefter den ønskede værdi til ' klar-
Eksempel
I dette eksempel vil vi bruge ' md ' brudpunkt med ' klar-begge ' nytte og ' lg ' brudpunkt med ' klar-ingen ' værktøj i ' ” element for at ændre dets position på mellem og stor skærmstørrelse:
< legeme >
< div klasse = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' klasse = 'flåd-venstre p-3 w-28 h-24' alt = 'billede' / >
< img src = 'tailwindcss_img.png' klasse = 'flyde-højre p-3' alt = 'billede' / >
< s klasse = 'tekst-justify clear-venstre md:clear-both lg:clear-none' > Tailwind CSS leverer 'floats'-værktøjer til at kontrollere indpakningen af indhold omkring et element.
Dette eksempel viser, hvordan man bruger breakpoints og medieforespørgsler med 'clear'-værktøjet i Tailwind. < / s >
< / div >
< / legeme >
Her:
- 'flyde-venstre' klasse flyder elementerne til containerens venstre side.
- 'flyde-højre' klasse flyder elementerne til containerens højre side.
- 'clear-venstre' klasse flytter
-elementet under det venstresvævende element i containeren.
- 'md:clear-begge' klasse rydder både venstre og højre flydere og placerer
-elementet under dem på medium skærmstørrelse.
- 'lg:clear-none' klasse deaktiverer enhver clear, der anvendes på
-elementet, og tillader elementet at flyde på containerens begge sider i en stor skærmstørrelse.
Produktion
I henhold til ovenstående output er de angivne brudpunkter og medieforespørgsler blevet anvendt på 'clear'-værktøjet.
Konklusion
For at anvende breakpoints og medieforespørgsler på 'clear' hjælpeprogrammer i Tailwind skal du definere den ønskede værdi til ' klar-