Bootstrap 4 Responsive Utilities sichtbar / versteckt xs sm lg funktioniert nicht

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-*-downKlassen, 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.

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-*-noneund .d-*-blockKlassen 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:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs"wird class="d-none d-sm-block"(oder d-keine d-sm-inline-block ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

Ein Beispiel für reaktionsfähige Bootstrap 4-Dienstprogramme :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

• codepen.io/_yatko/pen/ZJXQxy

Dokumentation

Bildschirmgrößenklasse

- -

1. Versteckt auf allen .d-none

2. Versteckt nur auf xs .d-none .d-sm-block

3. Versteckt nur auf sm .d-sm-none .d-md-Block

4. Versteckt nur auf md .d-md-none .d-lg-Block

5. Versteckt nur auf lg .d-lg-none .d-xl-Block

6. Nur auf xl .d-xl-none versteckt

7. Sichtbar auf allen .d-Blöcken

8. Nur sichtbar auf xs .d-block .d-sm-none

9. Nur sichtbar auf sm .d-none .d-sm-block .d-md-none

10. Nur sichtbar auf md .d-none .d-md-block .d-lg-none

11. Nur sichtbar auf lg .d-none .d-lg-block .d-xl-none

12. 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

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

Einige Versionen funktionieren

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>