Tento článek bude příkladem metody použití bodů přerušení a dotazů na média na „clear“ nástroje v Tailwindu.
Jak využít zarážky a dotazy na média při „vymazat“ v Tailwindu?
Chcete-li použít konkrétní zarážky a dotazy na média na „jasné“ nástroje v Tailwindu, vytvořte strukturu HTML. Poté definujte požadovanou hodnotu do „ clear-
Příklad
V tomto příkladu použijeme „ md 'bod přerušení s ' jasné - obojí 'utilita a' lg 'bod přerušení s ' jasné-žádné ” nástroj v “ ” prvek pro změnu jeho pozice na střední a velké obrazovce:
< tělo >
< div třída = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' třída = 'plovoucí levý p-3 w-28 h-24' všechno = 'obraz' / >
< img src = 'tailwindcss_img.png' třída = 'float-right p-3' všechno = 'obraz' / >
< p třída = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS poskytuje obslužné programy „float“ pro ovládání obtékání obsahu kolem prvku.
Tento příklad ukáže, jak používat zarážky a dotazy na média s nástrojem „clear“ v Tailwindu. < / p >
< / div >
< / tělo >
Tady:
- 'plavat vlevo' class přemístí prvky na levou stranu kontejneru.
- 'plovoucí doprava' class přemístí prvky na pravou stranu kontejneru.
- 'jasně doleva' class přesune prvek
pod levý prvek v kontejneru.
- 'md:clear-oba' class vymaže levou i pravou plovoucí lištu a umístí pod ně prvek
na střední obrazovce.
- 'lg:clear-none' class zakáže jakékoli vymazání aplikované na prvek
a umožní prvku plavat po obou stranách kontejneru na velké obrazovce.
Výstup
Podle výše uvedeného výstupu byly zadané body přerušení a dotazy na média úspěšně aplikovány na obslužný program „clear“.
Závěr
Chcete-li použít body přerušení a dotazy na média na nástroje „clear“ v Tailwindu, definujte požadovanou hodnotu pro „ clear-