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

In Bootstrap v3 uso spesso le classi nascoste - ** combinate con clearfix per controllare i layout a più colonne con diverse larghezze dello schermo. Per esempio,

Potrei combinare più nascosti - ** in un DIV per far apparire correttamente le mie colonne multiple a diverse larghezze dello schermo.

Ad esempio, se volessi visualizzare file di foto di prodotti, 4 per riga su schermi di dimensioni maggiori, 3 su schermi più piccoli, quindi 2 su schermi molto piccoli. Le foto dei prodotti potrebbero avere altezze diverse, quindi ho bisogno del clearfix per assicurarmi che la riga si interrompa correttamente.

Ecco un esempio in v3 ...

http://jsbin.com/tosebayode/edit?html,css,output

Ora che v4 ha eliminato queste classi e le ha sostituite con le classi visibile / nascosta - ** - su / giù, invece, devo fare la stessa cosa con più DIV.

Ecco un esempio simile in v4 ...

http://jsbin.com/sagowihowa/edit?html,css,output

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

A partire dal...

<div class="clearfix visible-xs-block visible-sm-block"></div>

per...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

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

Aggiornamento per Bootstrap 4 (2018)

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

Ricorda che extra-small / mobile (precedentemente xs) è il breakpoint predefinito (implicito), a meno che non venga sovrascritto da un breakpoint più grande . Pertanto, l'informazione -xsnon esiste più in Bootstrap 4 .

Mostra / nascondi per breakpoint e down :

• 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 punto di interruzione e versioni successive :

• 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(solo) = d-none d-sm-block(uguale a hidden-xs-down)
• hidden-sm (solo) = d-block d-sm-none d-md-block
• hidden-md (solo) = d-block d-md-none d-lg-block
• hidden-lg (solo) = d-block d-lg-none d-xl-block
• hidden-xl (n / a 3.x) = d-block d-xl-none
• visible-xs (solo) = d-block d-sm-none
• visible-sm (solo) = d-none d-sm-block d-md-none
• visible-md (solo) = d-none d-md-block d-lg-none
• visible-lg (solo) = 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, nota che d-*-blockpuò essere sostituito con d-*-inline, d-*-flex, d-*-table-cell, d-*-tableecc .. a seconda del tipo di visualizzazione dell'elemento. Maggiori informazioni sulle classi di visualizzazione

Sfortunatamente tutte le classi hidden-*-upe hidden-*-downsono state rimosse da Bootstrap (a partire dalla versione 4 di Bootstrap Beta , nella versione 4 Alpha e versione 3 esistevano ancora queste classi).

Invece, d-*dovrebbero essere usate nuove classi , 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 di NASCONDERE gli elementi mentre il nuovo approccio era di MOSTRARE gli elementi. Mostrare elementi non è così semplice con i CSS in quanto è necessario sapere se l'elemento viene visualizzato come blocco, in linea, blocco in linea, tabella ecc.

Potresti voler ripristinare i precedenti stili "nascosti- *" noti da Bootstrap 3 con questo CSS:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* 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 autoesplicative.

Bootstrap v4.1 utilizza nuovi nomi di classe per nascondere le colonne sul loro sistema di griglia.

Per nascondere le colonne in base alla larghezza dello schermo, utilizzare la d-noneclasse o una qualsiasi delle d-{sm,md,lg,xl}-noneclassi. Per mostrare colonne su determinate dimensioni dello schermo, combina le classi sopra menzionate con d-blocko d-{sm,md,lg,xl}-blockclassi.

Esempi sono:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Più di questi qui .

Non mi aspetto che i div multipli siano una buona soluzione.

Penso anche che puoi sostituire .visible-sm-blockcon .hidden-xs-downe .hidden-md-up(o .hidden-sm-downe .hidden-lg-upagire sulle stesse media query).

hidden-sm-up compila in:

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

.hidden-sm-downe .hidden-lg-upcompila 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 agire allo stesso modo.

La situazione diventa diversa quando si tenta di sostituire .visible-sm-blocke .visible-lg-block. I documenti di Bootstrap v4 ti dicono:

Queste classi non tentano di soddisfare casi meno comuni in cui la visibilità di un elemento non può essere espressa come un singolo intervallo contiguo di dimensioni del punto di interruzione del viewport; 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 buona 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 classes.
@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 _custom.scssfile che è incluso a questo punto nel 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";
[..]

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

Ora devi definire la dimensione di ciò che viene nascosto come tale

.hidden-xs-down

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

.hidden-xs-up

Nasconderà tutto

Per bootstrap 4, ecco un'immagine a matrice che spiega le classi utilizzate per mostrare / nascondere gli elementi dipende dalle dimensioni dello schermo:

Fonte: Meduim: Bootstrap 4 Hidden & Visible

Bootstrap 4 per nascondere l'intero contenuto usa questa classe '.d-none' nasconderà tutto indipendentemente dai punti di interruzione come la precedente classe di versione bootstrap '.hidden'

Sfortunatamente queste nuove classi bootstrap 4 non funzionano come quelle vecchie su un div usando collapsecome impostano il div visibile su blockcui inizia visibile anziché nascosto e se aggiungi un div extra attorno alla collapsefunzionalità non funziona più.

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>