Falta visible - ** y oculto - ** en Bootstrap v4

En Bootstrap v3, a menudo uso las clases ocultas ** combinadas con clearfix para controlar diseños de varias columnas en diferentes anchos de pantalla. Por ejemplo,

Podría combinar múltiples ocultos - ** en un DIV para hacer que mis múltiples columnas aparezcan correctamente en diferentes anchos de pantalla.

Como ejemplo, si quisiera mostrar filas de fotos de productos, 4 por fila en pantallas más grandes, 3 en pantallas más pequeñas y luego 2 en pantallas muy pequeñas. Las fotos del producto pueden tener diferentes alturas, por lo que necesito el clearfix para asegurar que la fila se rompa correctamente.

Aquí hay un ejemplo en v3 ...

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

Ahora que v4 ha eliminado estas clases y las ha reemplazado con las clases visibles / ocultas - ** - arriba / abajo, parece que tengo que hacer lo mismo con múltiples DIV en su lugar.

Aquí hay un ejemplo similar en v4 ...

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

Así que pasé de DIV individuales a tener que agregar múltiples DIV con muchas clases arriba / abajo para lograr lo mismo.

De...

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

a...

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

¿Hay una mejor manera de hacer esto en v4 que he pasado por alto?

Actualización para Bootstrap 4 (2018)

Las clases hidden-*y ya no existen en Bootstrap 4. Si desea ocultar un elemento en niveles o puntos de interrupción específicos en Bootstrap 4, use las clases de visualización en consecuencia.visible-*d-*

Recuerde que extra-small / mobile (anteriormente xs) es el punto de interrupción predeterminado (implícito), a menos que sea anulado por un punto de interrupción más grande . Por lo tanto, el -xsinfijo ya no existe en Bootstrap 4 .

Mostrar / ocultar para punto de interrupción y abajo :

• 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 que hidden)

Mostrar / ocultar para punto de interrupción y arriba :

• hidden-xs-up= d-none(igual que 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 solo para un único punto de interrupción :

• hidden-xs(solo) = d-none d-sm-block(igual que 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

Demostración de las clases de visualización receptiva en Bootstrap 4

Además, tenga en cuenta que d-*-blockpuede ser sustituido con d-*-inline, d-*-flex, d-*-table-cell, d-*-tableetc .. dependiendo del tipo de visualización del elemento. Lea más sobre las clases de visualización

Desafortunadamente, todas las clases hidden-*-upy hidden-*-downse eliminaron de Bootstrap (a partir de Bootstrap Versión 4 Beta , en la Versión 4 Alfa y la Versión 3 estas clases todavía existían).

En cambio, se d-*deben usar nuevas clases , como se menciona aquí: https://getbootstrap.com/docs/4.0/migration/#utilities

Descubrí que el nuevo enfoque es menos útil en algunas circunstancias. El viejo enfoque era OCULTAR elementos, mientras que el nuevo enfoque es MOSTRAR elementos. Mostrar elementos no es tan fácil con CSS ya que necesita saber si el elemento se muestra como bloque, en línea, bloque en línea, tabla, etc.

Es posible que desee restaurar los antiguos estilos "hidden- *" conocidos de Bootstrap 3 con 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;
    } 
}

Las clases hidden-unless-*no se incluyeron en Bootstrap 3, pero también son útiles y deberían explicarse por sí mismas.

Bootstrap v4.1 usa nuevos nombres de clase para ocultar columnas en su sistema de cuadrícula.

Para ocultar columnas según el ancho de la pantalla, use d-noneclass o cualquiera de las d-{sm,md,lg,xl}-noneclases. Para mostrar columnas en ciertos tamaños de pantalla, combine las clases mencionadas anteriormente con d-blocko d-{sm,md,lg,xl}-blockclases.

Ejemplos son:

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

Más de estos aquí .

No espero que múltiples div's sean una buena solución.

También creo que puede reemplazar .visible-sm-blockcon .hidden-xs-downy .hidden-md-up(o .hidden-sm-downy .hidden-lg-uppara actuar en las mismas consultas de medios).

hidden-sm-up compila en:

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

.hidden-sm-downy .hidden-lg-upcompila en:

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

Ambas situaciones deberían actuar igual.

Su situación se vuelve diferente cuando intenta reemplazar .visible-sm-blocky .visible-lg-block. Los documentos de Bootstrap v4 te dicen:

Estas clases no intentan acomodar casos menos comunes en los que la visibilidad de un elemento no puede expresarse como un único rango contiguo de tamaños de punto de corte de la vista; en su lugar, necesitará usar CSS personalizado en tales 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;
  }
}

El usuario Klaro sugirió restaurar las antiguas clases de visibilidad, lo cual es una buena idea. Desafortunadamente, su solución no funcionó en mi proyecto.

Creo que es una mejor idea restaurar el antiguo mixin de bootstrap, ya que cubre todos los puntos de interrupción que el usuario puede definir individualmente.

Aquí está el 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;
    }
  }
}

En mi caso, he insertado esta parte en un _custom.scssarchivo que se incluye en este momento en 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/

Ahora tiene que definir el tamaño de lo que se oculta como tal

.hidden-xs-down

Ocultará cualquier cosa de xs y más pequeñas, solo xs

.hidden-xs-up

Ocultará todo

Para bootstrap 4, aquí hay una imagen matricial que explica que las clases utilizadas para mostrar / ocultar elementos dependen del tamaño de la pantalla:

Fuente: Meduim: Bootstrap 4 oculto y visible

Bootstrap 4 para ocultar todo el contenido use esta clase '.d-none' , ocultará todo independientemente de los puntos de interrupción, igual que la clase de versión de bootstrap anterior '.hidden'

Desafortunadamente, estas nuevas clases de bootstrap 4 no funcionan como las antiguas en un div, collapseya que establecen el div visible en el blockque comienza visible en lugar de oculto y si agrega un div adicional alrededor de la collapsefuncionalidad ya no funciona.

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>