bootstrap 4 utilità reattive visibili / nascoste xs sm lg non funzionanti


96

Problemi con le nuove classi nascoste / visibili delle utilità reattive durante la migrazione a Bootstrap 4 . Sono consapevole che le classi .hidden- sono state rimosse dalla v3 e sostituite con .hidden-*-up .hidden-*-down. Usando le nuove .hidden-*-up.hidden-*-downclassi ma gli elementi non cambiano in visibile / nascosto. Non riesco a capire perché.

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

* nulla è nascosto in questo esempio, indipendentemente dalle dimensioni dello schermo (Safari, modalità responsive design)


2
E la tua domanda è cosa? stackoverflow.com/help/how-to-ask
Rob

@ Rob fair;) è cambiato.
Yatko

Devi pubblicare un esempio minimo del markup che causa il problema: esempio riproducibile minimo Non abbiamo idea di cosa siano gli "elementi".
Rob il

Imposta una codepen contenente Bootstrap 4 e il tuo esempio HTML: codepen.io/esr360/pen/prWjYv . La tua affermazione di "nulla è nascosto in questo esempio, indipendentemente dalle dimensioni dello schermo" non è corretta.
ESR

@EdmundReed sì, mi fa impazzire: ho provato con un semplice esempio, funziona sul mio Mac, smette di funzionare subito dopo la sincronizzazione ... ho provato la cache, anche un ISP diverso per escludere qualsiasi memorizzazione nella cache
Yatko

Risposte:


227

Con Bootstrap 4 le .hidden-* classi sono state completamente rimosse (sì, sono state sostituite da hidden-*-*ma anche quelle classi sono sparite dalla v4 alphas).

A partire dalla v4-beta, puoi combinare .d-*-nonee .d-*-blockclassi per ottenere lo stesso risultato.

anche visible- * è stato rimosso ; invece di usare .visible-*classi esplicite , rendi visibile l'elemento non nascondendolo (di nuovo, usa le combinazioni di .d-none .d-md-block). Ecco l'esempio di lavoro:

<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"diventa class="d-none d-sm-block"(o d-none 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>

Un esempio di utilità reattive Bootstrap 4 :

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

Documentazione


1
Il motivo per cui non sono riuscito a trovarlo, la versione beta della v4 è stata pubblicata un paio di giorni fa e tutti i risultati indicizzati da Google ti portano ancora alla v4-alpha, in qualche modo ho ottenuto il nuovo collegamento CDN ma tutto il resto era ancora -alpha
Yatko

2
Presumo "d" = display.
user20232359723568423357842364

16
perché avrebbero introdotto un cambiamento così poco intuitivo e rivoluzionario? alcuna spiegazione?
szaman

3
@rrrafalsz Mi sono chiesto la stessa cosa. Questo sembra un passo indietro inutilmente complicato rispetto al precedente "visible-sm-up / down" che avevano in alpha. Sarebbe interessante conoscere il motivo.
Katai

Potresti commentare chiaramente nel tuo esempio, quali DIV saranno visibili e quali no? Mi ci è voluto un po 'e non sono sicuro, se lo commento, se sarebbe giusto. grazie
helle

51

Classe di dimensioni dello schermo

-

  1. Nascosto su tutti i .d-none

  2. Nascosto solo su xs .d-none .d-sm-block

  3. Nascosto solo su sm .d-sm-none .d-md-block

  4. Nascosto solo su md .d-md-none .d-lg-block

  5. Nascosto solo su lg .d-lg-none .d-xl-block

  6. Nascosto solo su xl .d-xl-none

  7. Visibile su tutti i .d-block

  8. Visibile solo su xs .d-block .d-sm-none

  9. Visibile solo su sm .d-none .d-sm-block .d-md-none

  10. Visibile solo su md .d-none .d-md-block .d-lg-none

  11. Visibile solo su lg .d-none .d-lg-block .d-xl-none

  12. Visibile solo su xl .d-none .d-xl-block

Fare riferimento a questo collegamento http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Collegamento 4.5: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements


1
Sebbene questo possa teoricamente rispondere alla domanda, sarebbe preferibile includere qui le parti essenziali della risposta e fornire il collegamento per riferimento.
Rick il

6

Bootstrap 4 (^ beta) ha cambiato le classi per nascondere / mostrare gli elementi reattivi. Vedi questo link per le classi corrette da usare: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements


2
Grazie. Bootstrap potrebbe rimuovere il vecchio contenuto almeno per archiviarlo, quindi i noob totali (come me) non devono passare attraverso 123523532 possibili soluzioni prima di trovare questa risposta allo stack. Negli ultimi anni, lo stack overflow è più utile di google, quindi quando la gente dice usa google ... io dico di no, usa lo stack .. Più veloce e più utile.
Blu

0

Alcune versioni funzionanti

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.