Manca visibile – ** e nascosto – ** in Bootstrap v4

In Bootstrap v3 uso spesso le classi hidden – ** combinate con clearfix per controllare layout di colonne multiple a diverse larghezze dello schermo. Per esempio,

Potrei combinare più hidden – ** in un DIV per far apparire le mie multi colonne in modo corretto a diverse larghezze dello schermo.

Ad esempio, se volessi visualizzare righe di foto di prodotti, 4 per riga su schermi di dimensioni maggiori, 3 su schermi più piccoli, 2 su schermi molto piccoli. Le foto del prodotto potrebbero essere altezze diverse, quindi ho bisogno del suffisso per garantire che la riga si rompa correttamente.

Ecco un esempio in v3 …

Ora che v4 ha eliminato queste classi e le ha sostituite con le classi visibili / nascoste – ** – su / giù, sembra che debba fare la stessa cosa con più DIV.

Ecco un esempio simile in v4 …

Quindi sono passato da singoli DIV a dover aggiungere più DIV con molte classi su / giù per ottenere la stessa cosa.

A partire dal…

a…

 

C’è un modo migliore di farlo in v4 che ho trascurato?

Aggiornamento per Bootstrap 4 (2018)

Le hidden-* e hidden-* non esistono più in Bootstrap 4. Se si desidera hide un elemento su livelli o punti di interruzione specifici in Bootstrap 4, utilizzare le classi di visualizzazione d-* conseguenza.

Ricorda che extra-small / mobile (ex xs ) è il punto di interruzione predefinito (implicito), a meno che non venga sostituito da un breakpoint più ampio . Pertanto, l’infisso -xs non esiste più in Bootstrap 4 .

Mostra / nascondi per breakpoint e giù :

  • hidden-xs-down (hidden-xs) = d-none d-sm-block
  • hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
  • hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
  • hidden-lg-down = d-none d-xl-block
  • hidden-xl-down (n / a 3.x) = d-none (uguale a hidden )

Mostra / nascondi per breakpoint e up :

  • hidden-xs-up = d-none (uguale a hidden )
  • hidden-sm-up = d-sm-none
  • hidden-md-up = d-md-none
  • hidden-lg-up = d-lg-none
  • hidden-xl-up (n / a 3.x) = d-xl-none

Mostra / nascondi solo per un singolo punto di interruzione :

  • hidden-xs (only) = d-none d-sm-block (uguale a hidden-xs-down )
  • hidden-sm (only) = d-block d-sm-none d-md-block
  • hidden-md (only) = d-block d-md-none d-lg-block
  • hidden-lg (only) = d-block d-lg-none d-xl-block
  • hidden-xl (n / a 3.x) = d-block d-xl-none
  • visible-xs (only) = d-block d-sm-none
  • visible-sm (only) = d-none d-sm-block d-md-none
  • visible-md (only) = d-none d-md-block d-lg-none
  • visible-lg (only) = d-none d-lg-block d-xl-none
  • visible-xl (n / a 3.x) = d-none d-xl-block

Demo delle classi di visualizzazione reattive in Bootstrap 4

Inoltre, si noti che d-*-block può essere sostituito con d-*-inline , d-*-flex , d-*-table-cell , d-*-table ecc. A seconda del tipo di visualizzazione dell’elemento. Leggi di più sulle classi di visualizzazione

Sfortunatamente tutte le classi hidden-*-up e hidden-*-down sono state rimosse da Bootstrap (a partire da Bootstrap versione 4 Beta , nella versione 4 Alpha e versione 3 queste classi esistevano ancora).

Invece, dovrebbero essere usate nuove classi d-* , come menzionato qui: https://getbootstrap.com/docs/4.0/migration/#utilities

Ho scoperto che il nuovo approccio è meno utile in alcune circostanze. Il vecchio approccio era quello di hide gli elementi mentre il nuovo approccio era quello di mostrare elementi. Mostrare gli elementi non è così facile con i CSS poiché è necessario sapere se l’elemento è visualizzato come blocco, in linea, blocco in linea, tabella ecc.

Potresti voler ripristinare i precedenti stili “hidden- *” noti da Bootsrap 3 con questo CSS:

 /*\ * Restore Bootstrap 3 "hidden" utility classs. \*/ /* Breakpoint XS */ @media (max-width: 575px) { .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl { display: none !important; } } /* Breakpoint SM */ @media (min-width: 576px) and (max-width: 767px) { .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl { display: none !important; } } /* Breakpoint MD */ @media (min-width: 768px) and (max-width: 991px) { .hidden-md-down, .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl { display: none !important; } } /* Breakpoint LG */ @media (min-width: 992px) and (max-width: 1199px) { .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl { display: none !important; } } /* Breakpoint XL */ @media (min-width: 1200px) { .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg { display: none !important; } } 

Le classi hidden-unless-* non sono state incluse in Bootstrap 3, ma sono anche utili e dovrebbero essere auto-esplicative.

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Ora devi definire la dimensione di ciò che viene nascosto in questo modo

 .hidden-xs-down 

Nasconderà qualsiasi cosa da xs e più piccolo, solo xs

 .hidden-xs-up 

Nascondera ‘tutto

Bootstrap v4.1 utilizza nuovi nomi di classi per hide le colonne sul proprio sistema di griglia.

Per hide le colonne in base alla larghezza dello schermo, usa la class d-none o una qualsiasi delle classi non d-{sm,md,lg,xl}-none . Per mostrare le colonne su alcune dimensioni dello schermo, combina le classi sopra citate con le classi d-block o d-{sm,md,lg,xl}-block .

Gli esempi sono:

 
hide on screens wider than lg
hide on screens smaller than lg

Non mi aspetto che div multiple siano una buona soluzione.

Penso inoltre che sia ansible sostituire .visible-sm-block con .hidden-xs-down e .hidden-md-up (o .hidden-sm-down e .hidden-lg-up per agire sulle stesse query multimediali).

hidden-sm-up in:

 .visible-sm-block { display: none !important; } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-block { display: block !important; } } 

.hidden-sm-down e .hidden-lg-up compila in:

 @media (max-width: 768px) { .hidden-xs-down { display: none !important; } } @media (min-width: 991px) { .hidden-lg-up { display: none !important; } } 

Entrambe le situazioni dovrebbero comportarsi allo stesso modo.

La situazione diventa diversa quando provi a sostituire .visible-sm-block e .visible-lg-block . I documenti Bootstrap v4 ti dicono:

Queste classi non tentano di ospitare casi meno comuni in cui la visibilità di un elemento non può essere espressa come un unico intervallo contiguo di dimensioni del punto di interruzione della vista; in questi casi dovrai invece utilizzare CSS personalizzati.

 .visible-sm-and-lg { display: none !important; } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-and-lg { display: block !important; } } @media (min-width: 1200px) { .visible-sm-and-lg { display: block !important; } } 

L’utente Klaro ha suggerito di ripristinare le vecchie classi di visibilità, che è una buona idea. Sfortunatamente, la loro soluzione non ha funzionato nel mio progetto.

Penso che sia una migliore idea ripristinare il vecchio mixin di bootstrap, perché copre tutti i punti di interruzione che possono essere definiti individualmente dall’utente.

Ecco il codice:

 // Restore Bootstrap 3 "hidden" utility classs. @each $bp in map-keys($grid-breakpoints) { .hidden-#{$bp}-up { @include media-breakpoint-up($bp) { display: none !important; } } .hidden-#{$bp}-down { @include media-breakpoint-down($bp) { display: none !important; } } .hidden-#{$bp}-only{ @include media-breakpoint-only($bp){ display:none !important; } } } 

Nel mio caso, ho inserito questa parte in un file _custom.scss che è incluso in questo punto nel file bootstrap.scss :

 /*! * Bootstrap v4.0.0-beta (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @import "functions"; @import "variables"; @import "mixins"; @import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above @import "print"; @import "reboot"; [..] 

Sfortunatamente queste nuove classi di bootstrap 4 non funzionano come quelle vecchie su un div utilizzando il collapse quando impostano il div visibile da block che inizia visibile invece che nascosto e se aggiungi un ulteriore div attorno alla funzionalità collapse non funziona più.