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

96

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.

Yatko
quelle
2
Und deine Frage ist was? stackoverflow.com/help/how-to-ask
Rob
@ Rob fair;) geändert.
Yatko
Sie müssen ein minimales Beispiel für das Markup veröffentlichen, das das Problem verursacht: minimales reproduzierbares Beispiel Wir haben keine Ahnung, was "die Elemente" sind.
Rob
Richten Sie einen Codepen ein, der Bootstrap 4 und Ihr HTML-Beispiel enthält: codepen.io/esr360/pen/prWjYv . Ihre Behauptung "In diesem Beispiel ist nichts verborgen, unabhängig von der Bildschirmgröße" ist falsch.
ESR
@EdmundReed ja, es macht mich verrückt: Ich habe es mit einem einfachen Beispiel versucht, arbeite auf meinem Mac, funktioniert nicht mehr direkt nach der Synchronisierung ... habe versucht, einen Cache zu
erstellen

Antworten:

226

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>

Dokumentation

Yatko
quelle
1
Der Grund, warum ich das nicht finden konnte, v4 beta wurde vor ein paar Tagen veröffentlicht und alle von Google indizierten Ergebnisse bringen Sie immer noch zu v4-alpha. Irgendwie habe ich den neuen CDN- Link bekommen, aber der Rest war immer noch -alpha
Yatko
2
Ich nehme an "d" = display.
user20232359723568423357842364
16
Warum sollten sie eine so unintuitive, bahnbrechende Veränderung einführen? irgendeine Erklärung?
Szaman
3
@rrrafalsz Ich habe mich über das Gleiche gewundert. Dies scheint ein unnötig komplizierter Rückschritt gegenüber dem vorherigen "sichtbaren-sm-up / down" zu sein, das sie in Alpha hatten. Es wäre interessant, den Grund zu kennen.
Katai
Könnten Sie in Ihrem Beispiel klar kommentieren, welche der DIVs sichtbar sind und welche nicht? Es hat eine Weile gedauert, und ich bin mir nicht sicher, ob das richtig wäre, wenn ich es kommentiere. danke
helle
50

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

Vinod Chauhan
quelle
1
Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
Rick
6

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

jross
quelle
2
Danke dir. Bootstrap könnte zumindest alte Inhalte entfernen, um sie zu archivieren, so dass Noobs (wie ich) nicht durch 123523532 mögliche Lösungen gehen müssen, bevor sie diese Antwort im Stack finden. In den letzten Jahren ist der Stapelüberlauf nützlicher als Google. Wenn also Leute sagen, verwenden Sie Google ... Ich sage nein, verwenden Sie Stapel. Schneller und nützlicher.
Blau
0

Einige Versionen funktionieren

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