Betrachten Sie diese Codes:
HTML
%Vor%CSS
%Vor%Wenn Sie die Größe des Bildschirms horizontal ändern, wird der Text irgendwann nicht mehr angezeigt.
Ich möchte wissen, ob es möglich ist, den Schaltflächentext automatisch zu ändern, wenn die horizontale Bildschirmgröße geändert wird. Etwas wie "+ Add New Item" nur für das Plus-Signal "+" in kleinen Geräten.
Ich bin ein wenig noob mit Medienabfragen, also denke ich, dass ich etwas vermisse oder es falsch mache.
Kann mir jemand helfen?
Ich habe diese Geige dafür gemacht.
Probieren Sie diese Arbeitsdemo: JSFiddle .
Fügen Sie dem Schaltflächentext eine Klasse hinzu, setzen Sie display:none , wenn die Bildschirmgröße klein genug ist:
Und CSS:
%Vor%Vorschlag: Setzen Sie niemals DOM-Struktur oder Informationen in CSS-Stile ein. Es ist schwer zu pflegen.
Sie können dies tun, ohne zusätzliche Medienabfragen oder CSS hinzuzufügen, indem Sie die eingebauten responsiven Dienstprogramme innerhalb von Bootstrap verwenden:
%Vor%Es fügt etwas mehr HTML-Markup hinzu, aber die zusätzlichen Daten gehen entweder in den HTML-Code oder in den CSS-Code, also was auch immer für Sie am besten funktioniert.
Wenn Sie Bootstrap verwenden, dann ist es so einfach wie in zwei Klassen schleichen.
hidden-sm und hidden-xs Verdecken Sie das Element, wenn die Bildschirmbreite mittel bzw. klein ist.
So einfach, Sie wollen ausgeblendet werden, wenn der Bildschirm klein ist, wenden Sie nur diese Klassen an!
Beispiel:
%Vor% Sie erstellen einfach eine weitere Medienabfrage (an dem Punkt, an dem Sie denken, dass sich der Text ändern sollte) und blenden den Text innerhalb der Schaltfläche aus. Anstatt die Schaltfläche dort zu platzieren, wo sie jetzt ist, kapseln Sie sie in <span> und schreiben Sie dann CSS, um display auf none zu setzen, sobald die Seite kleiner als x Pixel wird.
HTML
%Vor%CSS
%Vor%Ich denke jedoch, dass dies mit jQuery gelöst werden sollte, da es keine Möglichkeit gibt zu garantieren, dass dies funktioniert, wenn Sie die Schaltfläche an anderen Stellen platzieren. Sie sollten versuchen, festzustellen, ob der Inhalt der Schaltfläche breiter ist als die Breite der Schaltfläche selbst, und dann eine "unsichtbare" Klasse entsprechend hinzufügen
Ich habe Ihre jsfiddle ein wenig modifiziert, aber jQuery scheint ein wenig fehlerhaft zu sein (versuchen Sie, die Werte, die ich in der Funktion verwende, zu drucken)
Tags und Links html css twitter-bootstrap twitter-bootstrap-3 media-queries