Falta visível - ** e oculto - ** no Bootstrap v4

No Bootstrap v3, geralmente uso as classes hidden - ** combinadas com o clearfix para controlar layouts de várias colunas em diferentes larguras de tela. Por exemplo,

Eu poderia combinar vários ocultos - ** em um DIV para fazer minhas múltiplas colunas aparecerem corretamente em diferentes larguras de tela.

Como exemplo, se eu quisesse exibir linhas de fotos de produtos, 4 por linha em tamanhos de tela maiores, 3 em telas menores e 2 em telas muito pequenas. As fotos do produto podem ter alturas diferentes, portanto, preciso do clearfix para garantir que a linha se quebre corretamente.

Aqui está um exemplo na v3 ...

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

Agora que a v4 acabou com essas classes e as substituiu pelas classes visível / oculta - ** - para cima / para baixo, parece que preciso fazer a mesma coisa com vários DIVs.

Aqui está um exemplo semelhante na v4 ...

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

Então, eu passei de DIVs individuais para ter que adicionar vários DIVs com muitas classes up / down para conseguir a mesma coisa.

De...

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

para...

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

Existe uma maneira melhor de fazer isso na v4 que eu ignorei?

Atualização para o Bootstrap 4 (2018)

As classes hidden-*e não existem mais no Bootstrap 4. Se você deseja ocultar um elemento em camadas ou pontos de interrupção específicos no Bootstrap 4, use as classes de exibição adequadamente.visible-*d-*

Lembre-se de que extra-pequeno / móvel (anteriormente xs) é o ponto de interrupção padrão (implícito), a menos que seja substituído por um ponto de interrupção maior . Portanto, o -xsinfixo não existe mais no Bootstrap 4 .

Mostrar / ocultar para o ponto de interrupção e para baixo :

• 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(igual a hidden)

Mostrar / ocultar para o ponto de interrupção e para cima :

• hidden-xs-up= d-none(igual 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

Mostrar / ocultar apenas para um único ponto de interrupção :

• hidden-xs(apenas) = d-none d-sm-block(o mesmo que hidden-xs-down)
• hidden-sm (apenas) = d-block d-sm-none d-md-block
• hidden-md (apenas) = d-block d-md-none d-lg-block
• hidden-lg (apenas) = d-block d-lg-none d-xl-block
• hidden-xl (n / a 3.x) = d-block d-xl-none
• visible-xs (apenas) = d-block d-sm-none
• visible-sm (apenas) = d-none d-sm-block d-md-none
• visible-md (apenas) = d-none d-md-block d-lg-none
• visible-lg (apenas) = d-none d-lg-block d-xl-none
• visible-xl (n / a 3.x) = d-none d-xl-block

Demonstração das classes de exibição responsivas no Bootstrap 4

Além disso, nota que d-*-blockpode ser substituído com d-*-inline, d-*-flex, d-*-table-cell, d-*-tableetc .., dependendo do tipo do elemento de afixação. Leia mais sobre as classes de exibição

Infelizmente todas as classes hidden-*-upe hidden-*-downforam removidos do Bootstrap (a partir de Bootstrap Versão 4 Beta , na versão 4 Alpha e Versão 3 dessas classes ainda existia).

Em vez disso, novas classes d-*devem ser usadas, conforme mencionado aqui: https://getbootstrap.com/docs/4.0/migration/#utilities

Descobri que a nova abordagem é menos útil em algumas circunstâncias. A abordagem antiga era ocultar elementos, enquanto a nova abordagem era mostrar elementos. Mostrar elementos não é tão fácil com CSS, pois você precisa saber se o elemento é exibido como bloco, embutido, bloco embutido, tabela etc.

Você pode restaurar os antigos estilos "hidden- *" conhecidos no Bootstrap 3 com este 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;
    } 
}

As aulas hidden-unless-*não foram incluídas no Bootstrap 3, mas também são úteis e devem ser auto-explicativas.

O Bootstrap v4.1 usa novos nomes de classe para ocultar colunas em seus sistemas de grade.

Para ocultar colunas, dependendo da largura da tela, use a d-noneclasse ou qualquer uma das d-{sm,md,lg,xl}-noneclasses. Para mostrar colunas em determinados tamanhos de tela, combine as classes mencionadas acima com d-blockou d-{sm,md,lg,xl}-blockclasses.

Exemplos são:

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

Mais destes aqui .

Não espero que várias div's sejam uma boa solução.

Eu também acho que você pode substituir .visible-sm-blockpor .hidden-xs-downe .hidden-md-up(ou .hidden-sm-downe .hidden-lg-upagir nas mesmas consultas de mídia).

hidden-sm-up compila em:

.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 em:

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

Ambas as situações devem agir da mesma maneira.

Sua situação se torna diferente quando você tenta substituir .visible-sm-blocke .visible-lg-block. Os documentos do Bootstrap v4 informam:

Essas classes não tentam acomodar casos menos comuns em que a visibilidade de um elemento não pode ser expressa como um único intervalo contíguo de tamanhos de ponto de interrupção da viewport; você precisará usar CSS personalizado nesses casos.

.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;
  }
}

O usuário Klaro sugeriu restaurar as antigas classes de visibilidade, o que é uma boa ideia. Infelizmente, a solução deles não funcionou no meu projeto.

Eu acho que é uma idéia melhor restaurar o mixin antigo do bootstrap, porque ele cobre todos os pontos de interrupção que podem ser definidos individualmente pelo usuário.

Aqui está o código:

// 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;
    }
  }
}

No meu caso, inseri esta parte em um _custom.scssarquivo incluído neste momento no 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/

Agora você precisa definir o tamanho do que está sendo oculto

.hidden-xs-down

Ocultará qualquer coisa de xs e menor, apenas xs

.hidden-xs-up

Esconderá tudo

Para o bootstrap 4, aqui está uma imagem de matriz explicando as classes usadas para mostrar / ocultar elementos depende do tamanho da tela:

Fonte: Meduim: Bootstrap 4 Oculto e Visível

O Bootstrap 4 para ocultar todo o conteúdo usa essa classe '.d-none'; ele ocultará tudo, independentemente dos pontos de interrupção, da mesma forma que a classe anterior da versão do bootstrap '.hidden'

Infelizmente, essas novas classes de auto-inicialização 4 não funcionam como as antigas em uma div collapse, pois definem a div visível para a blockqual começa visível em vez de oculta e se você adicionar uma div extra à collapsefuncionalidade, não funcionará mais.

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>