In diesem Artikel wird die Methode zum Anwenden von Haltepunkten und Medienabfragen auf die „clear“-Dienstprogramme in Tailwind veranschaulicht.
Wie nutzt man Haltepunkte und Medienabfragen bei „clear“ in Tailwind?
Erstellen Sie eine HTML-Struktur, um bestimmte Haltepunkte und Medienabfragen auf „klare“ Dienstprogramme in Tailwind anzuwenden. Definieren Sie dann den gewünschten Wert für „ klar-
Beispiel
In diesem Beispiel verwenden wir das „ md ” Haltepunkt mit dem „ Lösche beide „Dienstprogramm“ und „ lg ” Haltepunkt mit dem „ klar-keine ” Dienstprogramm in der „ ”-Element, um seine Position auf mittleren und großen Bildschirmgrößen zu ändern:
< Körper >
< div Klasse = „h-96 mx-10 p-8 bg-sky-500“ >
< Bild src = „tailwindcss_img.png“ Klasse = „float-left p-3 w-28 h-24“ alles = 'Bild' / >
< Bild src = „tailwindcss_img.png“ Klasse = „float-right p-3“ alles = 'Bild' / >
< P Klasse = „text-justify clear-left md:clear-both lg:clear-none“ > Tailwind CSS bietet „Floats“-Dienstprogramme zur Steuerung des Inhaltsumbruchs um ein Element.
Dieses Beispiel zeigt, wie Haltepunkte und Medienabfragen mit dem Dienstprogramm „clear“ in Tailwind verwendet werden. < / P >
< / div >
< / Körper >
Hier:
- „float-left“ Die Klasse verschiebt die Elemente auf die linke Seite des Containers.
- 'schweben rechts' Die Klasse verschiebt die Elemente auf die rechte Seite des Containers.
- „klar-links“ Die Klasse verschiebt das
-Element unter das links schwebende Element im Container.
- „md:clear-both“ Die Klasse löscht sowohl linke als auch rechte Floats und positioniert das
-Element darunter auf mittlerer Bildschirmgröße.
- „lg:clear-none“ Die Klasse deaktiviert alle auf das
-Element angewendeten Löschvorgänge und ermöglicht, dass das Element bei einer großen Bildschirmgröße auf beiden Seiten des Containers schwebt.
Ausgabe
Gemäß der obigen Ausgabe wurden die angegebenen Haltepunkte und Medienabfragen erfolgreich auf das Dienstprogramm „clear“ angewendet.
Abschluss
Um Haltepunkte und Medienabfragen auf „clear“-Dienstprogramme in Tailwind anzuwenden, definieren Sie den gewünschten Wert für „ klar-