Bei der Migration auf Bootstrap 4 tritt ein Problem mit den neuen versteckten / sichtbaren Klassen für reaktionsfähige Dienstprogramme auf . Ich bin mir bewusst , dass .hidden- Klassen wurden von v3 entfernt und ersetzt mit .hidden-*-up
.hidden-*-down
. Verwenden Sie die neuen .hidden-*-up.hidden-*-down
Klassen, aber die Elemente ändern sich nicht in sichtbar / versteckt. Ich kann nicht herausfinden warum.
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
* In diesem Beispiel ist unabhängig von der Bildschirmgröße (Safari, Responsive Design Mode) nichts verborgen.
Antworten:
Mit Bootstrap 4 wurden
.hidden-*
Klassen vollständig entfernt (ja, sie wurden durch ersetzt,hidden-*-*
aber diese Klassen sind auch aus v4-Alphas verschwunden).Ab v4-beta können Sie
.d-*-none
und.d-*-block
Klassen kombinieren , um das gleiche Ergebnis zu erzielen.sichtbar- * wurde ebenfalls entfernt ; Anstatt explizite
.visible-*
Klassen zu verwenden, machen Sie das Element sichtbar, indem Sie es nicht ausblenden (verwenden Sie erneut Kombinationen von .d-none .d-md-block). Hier ist das Arbeitsbeispiel:class="hidden-xs"
wirdclass="d-none d-sm-block"
(oder d-keine d-sm-inline-block ) ...Ein Beispiel für reaktionsfähige Bootstrap 4-Dienstprogramme :
Dokumentation
quelle
display
.Bildschirmgrößenklasse
- -
Versteckt auf allen .d-none
Versteckt nur auf xs .d-none .d-sm-block
Versteckt nur auf sm .d-sm-none .d-md-Block
Versteckt nur auf md .d-md-none .d-lg-Block
Versteckt nur auf lg .d-lg-none .d-xl-Block
Nur auf xl .d-xl-none versteckt
Sichtbar auf allen .d-Blöcken
Nur sichtbar auf xs .d-block .d-sm-none
Nur sichtbar auf sm .d-none .d-sm-block .d-md-none
Nur sichtbar auf md .d-none .d-md-block .d-lg-none
Nur sichtbar auf lg .d-none .d-lg-block .d-xl-none
Nur sichtbar auf xl .d-none .d-xl-Block
Siehe diesen Link http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
4.5 Link: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements
quelle
Bootstrap 4 (^ beta) hat die Klassen für das reaktionsschnelle Ausblenden / Anzeigen von Elementen geändert. Unter diesem Link finden Sie die richtigen Klassen: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
quelle
Einige Versionen funktionieren
quelle