2017-08-15 3 views
1

Ich habe Probleme mit der "versteckten" -Klasse, um Inhalte in einer bestimmten Größe zu verbergen. Es funktioniert mit einigen Inhalten, aber nicht mit anderen.Bootstrap 4 "versteckte" Klasse funktioniert nicht konsistent

Ich benutze:

<div class="hidden-sm">something to hide in small viewports </div> 

ich es auf Navigationsmarkenlogo versucht haben und es funktioniert, aber es funktioniert nicht auf der Navigationsleiste, ein paar Bilder etc ...

Mit dem Code unten Werke (aber versteckt sie permanent)

<div hidden> something to hide in small viewports </div> 

den Code unter Verwendung von nicht auf allen

funktioniert

Kann jemand den Gebrauch ein wenig erklären? Bootstrap-Dokumente bieten nicht zu viele Details

Auch, wie Sie klar sagen können, ich bin nicht sehr gut mit CSS oder JavaScript, also würde ich lieber nur Bootstrap aus dem CDN importieren, ohne meine eigenen CSS-Dateien zu erstellen. (Wenn möglich)

+0

Tut mir leid, bearbeitet Post – willer2k

+0

, warum Sie nicht das Attribut Klasse verwenden? –

+0

Wie würde ich das machen? – willer2k

Antwort

1

In HTML Sie haben Attribute wie Klasse, alt, src etc ....

In Ihrem ersten Fall Sie mit dem Attribut Klasse und bietet eine Bootstrap-Klasse es, weshalb Es klappt.

das zweite Beispiel Sie verwenden ein HTML-Attribut namens versteckt und das ist, warum es funktioniert.

der dritte Code funktioniert nicht, da hidden-sm kein gültiges Attribut ist. Sie müssen stattdessen sagen ...

<div class="hidden-sm"> something to hide in small viewports </div> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

+0

hey Chris, sah dein Django-Tutorial auf Youtube, tolle Inhalte! Danke für Ihren Beitrag. :) In Bezug auf HTML-Attribute; Es macht jetzt Sinn, aber es erklärt nicht, warum es manchmal funktioniert, manchmal nicht. Wo und wann kann ich diese Bootstrap-Klasse verwenden? – willer2k

+0

Danke! Sie können die Klasse überall verwenden, wo Sie möchten, indem Sie sie wie im ersten Beispiel ausführen. Die Regeln, die die Stile dieser Klasse bestimmen, basieren auf der Breite des Bildschirms, der die Webseite anzeigt. Wenn Sie Ihren Browser verkleinern, werden Sie feststellen, dass sich das Layout ändert, da das Bootstrap-CSS Medienabfragen verwendet, um dem Browser mitzuteilen, dass er Stile ändern soll, wenn der Bildschirm eine bestimmte Breite hat. Ich würde empfehlen, dass Sie Ihre Seite in Chrom hochziehen. Drücken Sie F12, um die Entwicklungswerkzeuge zu öffnen, und sehen Sie sich die Registerkarte "Stile" an, um zu sehen, welche Stile angewendet werden. –

+0

Okay. Ich habe die ganze Nacht damit gespielt und kann keine Bilder in einer bestimmten Größe verstecken. Ich benutze Bootstrap 4 Beta. Ich weiß wirklich nicht, wie ich vorgehen soll, aber ich schätze, ich werde zu einem späteren Zeitpunkt darauf zurückkommen. Danke für deine Hilfe, Jungs und Mädels. :) – willer2k

Verwandte Themen