Ta članek bo ponazoril metodo uporabe prekinitvenih točk in medijskih poizvedb na pripomočkih »clear« v Tailwindu.
Kako uporabiti prelomne točke in medijske poizvedbe pri »clear« v Tailwindu?
Če želite uporabiti določene prekinitvene točke in medijske poizvedbe na 'čistih' pripomočkih v Tailwindu, ustvarite strukturo HTML. Nato določite želeno vrednost za “ počisti-
Primer
V tem primeru bomo uporabili » md ' prelomna točka z ' jasno-oboje »pripomoček in« lg ' prelomna točka z ' jasno-nič ' pripomoček v ' ” za spremembo položaja na srednjem in velikem zaslonu:
< telo >
< div razred = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' razred = 'float-left p-3 w-28 h-24' vse = 'slika' / >
< img src = 'tailwindcss_img.png' razred = 'lebdeči desni p-3' vse = 'slika' / >
< str razred = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS ponuja 'lebdeče' pripomočke za nadzor ovijanja vsebine okoli elementa.
Ta primer bo pokazal, kako uporabljati prekinitvene točke in medijske poizvedbe s pripomočkom 'clear' v Tailwindu. < / str >
< / div >
< / telo >
Tukaj:
- “float-left” razred premakne elemente na levo stran vsebnika.
- 'plava-desno' razred plava elemente na desno stran vsebnika.
- “jasno-levo” razred premakne element
pod levo lebdeči element v vsebniku.
- “md:clear-both” razred počisti tako levo kot desno lebdeče in postavi element
pod njiju na srednje velikem zaslonu.
- “lg:clear-none” onemogoči kakršno koli čiščenje, uporabljeno za element
, in omogoči, da element lebdi na obeh straneh vsebnika pri veliki velikosti zaslona.
Izhod
V skladu z zgornjim rezultatom so bile navedene prekinitvene točke in medijske poizvedbe uspešno uporabljene za pripomoček »počisti«.
Zaključek
Za uporabo prekinitvenih točk in medijskih poizvedb na »čistih« pripomočkih v Tailwindu definirajte želeno vrednost za » počisti-