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)

— Yatko
fonte

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

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>

codepen.io/_yatko/pen/ZJXQxy

Documentazione

— Yatko
fonte

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

-

Nascosto su tutti i .d-none
Nascosto solo su xs .d-none .d-sm-block
Nascosto solo su sm .d-sm-none .d-md-block
Nascosto solo su md .d-md-none .d-lg-block
Nascosto solo su lg .d-lg-none .d-xl-block
Nascosto solo su xl .d-xl-none
Visibile su tutti i .d-block
Visibile solo su xs .d-block .d-sm-none
Visibile solo su sm .d-none .d-sm-block .d-md-none
Visibile solo su md .d-none .d-md-block .d-lg-none
Visibile solo su lg .d-none .d-lg-block .d-xl-none
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

— Vinod Chauhan
fonte

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

— jross
fonte

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>

— Limitless isa
fonte