Aquest article exemplificarà el mètode d'aplicació de punts d'interrupció i consultes multimèdia a les utilitats 'clares' de Tailwind.
Com utilitzar els punts d'interrupció i les consultes de mitjans a 'clear' a Tailwind?
Per aplicar determinats punts d'interrupció i consultes multimèdia en utilitats 'clares' a Tailwind, creeu una estructura HTML. A continuació, definiu el valor desitjat al ' clar-
Exemple
En aquest exemple, utilitzarem el ' md 'punt de ruptura amb el' clar-tots dos 'utilitat i ' lg 'punt de ruptura amb el' clar-cap ' utilitat a la ' ” element per canviar la seva posició a la mida de la pantalla mitjana i gran:
< cos >
< div classe = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' classe = 'float-esquerra p-3 w-28 h-24' tot = 'imatge' / >
< img src = 'tailwindcss_img.png' classe = 'float-dreta p-3' tot = 'imatge' / >
< pàg classe = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS proporciona utilitats 'floats' per controlar l'embolcall del contingut al voltant d'un element.
Aquest exemple mostrarà com utilitzar els punts d'interrupció i les consultes multimèdia amb la utilitat 'clear' a Tailwind. < / pàg >
< / div >
< / cos >
Aquí:
- 'float a l'esquerra' classe flota els elements al costat esquerre del contenidor.
- 'flotar a la dreta' classe flota els elements al costat dret del contenidor.
- 'clar-esquerra' class mou l'element
per sota de l'element flotant a l'esquerra del contenidor.
- 'md:clear-both' class esborra els flotants esquerre i dret i col·loca l'element
a sota d'ells a una mida de pantalla mitjana.
- 'lg:clear-none' class desactiva qualsevol clara aplicada a l'element
i permet que l'element suri als dos costats del contenidor a una mida de pantalla gran.
Sortida
Segons la sortida anterior, els punts d'interrupció i les consultes de mitjans especificats s'han aplicat correctament a la utilitat 'clear'.
Conclusió
Per aplicar punts d'interrupció i consultes multimèdia a les utilitats 'clares' a Tailwind, definiu el valor desitjat al ' clar-