wake-up-neo.com

bootstrap 4 ansprechende Dienstprogramme sichtbar / versteckt xs sm lg funktioniert nicht

Probleme mit den neuen responsiven Dienstprogrammen versteckte/sichtbare Klassen bei der Migration nach Bootstrap 4 . Mir ist bekannt, dass .hidden-Klassen aus v3 entfernt und ersetzt ​​mit .hidden-*-up.hidden-*-down. Verwenden Sie die neuen Klassen .hidden-*-up.hidden-*-down, aber die Elemente werden nicht 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 wird unabhängig von der Bildschirmgröße nichts ausgeblendet (Safari, Responsive Design Mode)

73
Yatko

Mit Bootstrap 4 .hidden-* wurden Klassen komplett entfernt (ja, sie wurden durch hidden-*-* ersetzt, aber diese Klassen sind auch von v4-Alphas weg). Ab v4-beta können Sie die Klassen .d-*-none und .d-*-block kombinieren, um das gleiche Ergebnis zu erzielen. visible- * wurde ebenfalls entfernt ; Anstatt explizite Klassen .visible-* zu verwenden, machen Sie das Element sichtbar, indem Sie es nicht ausblenden (verwenden Sie erneut Kombinationen aus .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-none d-sm-inline-Block ) ...

Ein Beispiel für 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>
194
Yatko

**** Bildschirmgrößenklasse ****

-

  1. Verborgen auf allen .d-none

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

  3. Nur in sm versteckt .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. Versteckt nur auf xl .d-xl-none

  7. Auf allen .d-Blöcken sichtbar

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

  9. Nur sichtbar in 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

29
Vinod Chauhan

Bootstrap 4 (^ beta) hat die Klassen für das reaktionsschnelle Ausblenden/Anzeigen von Elementen geändert. Unter diesem Link finden Sie die korrekten zu verwendenden Klassen: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

6
jross

Einige Version funktioniert

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