Ez a cikk a töréspontok és médialekérdezések alkalmazásának módszerét mutatja be a Tailwind „clear” segédprogramjain.
Hogyan lehet kihasználni a töréspontokat és a médialekérdezéseket „clear” esetén a Tailwindben?
Ha bizonyos töréspontokat és médialekérdezéseket szeretne alkalmazni a Tailwind „tiszta” segédprogramjaira, hozzon létre egy HTML-struktúrát. Ezután adja meg a kívánt értéket a „ törlés-<érték> ” segédprogram különféle képernyőméretekhez a „ md ” vagy „ lg ” töréspontok. Végül az ellenőrzéshez módosítsa a weboldal képernyőméretét.
Példa
Ebben a példában a „ md ' töréspont a ' világos-mindkettő ' segédprogram és ' lg ' töréspont a ' világos-nincs ' segédprogram a ' ” elem pozíciójának megváltoztatásához közepes és nagy képernyőn:
< test >
< div osztály = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' osztály = 'float-left p-3 w-28 h-24' minden = 'kép' / >
< img src = 'tailwindcss_img.png' osztály = 'float-right p-3' minden = 'kép' / >
< p osztály = 'text-justify clear-left md:clear-both lg:clear-none' > A Tailwind CSS 'lebegő' segédprogramokat biztosít a tartalom elem körüli körbefuttatásának szabályozására.
Ez a példa bemutatja, hogyan lehet töréspontokat és médialekérdezéseket használni „clear” segédprogrammal a Tailwindben. < / p >
< / div >
< / test >
Itt:
- 'balra lebeg' osztály lebegteti az elemeket a tároló bal oldalára.
- „lebegő jobbra” osztály lebegteti az elemeket a tároló jobb oldalára.
- 'egyértelmű baloldal' osztály a
elemet a tároló balra lebegő eleme alá helyezi.
- 'md: clear-mindkettő' osztály törli mind a bal, mind a jobb oldali lebegést, és a
elemet alájuk helyezi közepes képernyőn.
- 'lg:tiszta-nincs' osztály letiltja a
elemre alkalmazott törlést, és lehetővé teszi, hogy az elem a tároló mindkét oldalán lebegjen nagy képernyőméretnél.
Kimenet
A fenti kimenet szerint a megadott töréspontok és médialekérdezések sikeresen alkalmazásra kerültek a „clear” segédprogramban.
Következtetés
Ha töréspontokat és médialekérdezéseket szeretne alkalmazni a Tailwind „clear” segédprogramjaira, adja meg a kívánt értéket a „ törlés-<érték> ” segédprogram különféle képernyőméretekhez a „ md ” vagy „ lg ” töréspontok. Az ellenőrzéshez módosítsa a weboldal képernyőméretét, és gondoskodjon a változtatásokról. Ez a cikk bemutatja azt a példát, amellyel meghatározott töréspontokat és médialekérdezéseket alkalmazhat a Tailwind „clear” segédprogramjain.