Faltante visible – ** y oculto – ** en Bootstrap v4

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

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

Como ejemplo, si quería mostrar filas de fotos de productos, 4 por fila en tamaños de pantalla más grandes, 3 en pantallas más pequeñas, luego 2 en pantallas muy pequeñas. Las fotos del producto pueden ser de diferentes alturas, así que necesito el clearfix para garantizar que la fila se rompa correctamente.

Aquí hay un ejemplo en v3 …

Ahora que v4 ha eliminado estas clases y las ha reemplazado por 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 …

Así que he pasado de los DIV individuales a tener que agregar varios DIV con muchas clases arriba / abajo para lograr lo mismo.

De…

a…

 

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

Actualización para Bootstrap 4 (2018)

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

Recuerde que el punto de corte predeterminado (implícito) es extra pequeño / móvil (anteriormente xs ), a menos que sea anulado por un punto de corte mayor . Por lo tanto, el infijo -xs ya no existe en Bootstrap 4 .

Mostrar / ocultar para el 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 (only) = d-none d-sm-block (igual que 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

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

Además, tenga en cuenta que d-*-block se puede reemplazar por d-*-inline , d-*-flex , d-*-table-cell , d-*-table etc., según el tipo de visualización del elemento. Lea más en las clases de visualización

Desgraciadamente todas las clases hidden-*-up y hidden-*-down fueron eliminadas de Bootstrap (a partir de Bootstrap Versión 4 Beta , en la Versión 4 Alpha y Versión 3 estas clases aún existían).

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

Descubrí que el nuevo enfoque es menos útil en algunas circunstancias. El antiguo 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 Bootsrap 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.

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

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

 .hidden-xs-down 

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

 .hidden-xs-up 

Ocultará todo

Bootstrap v4.1 usa nuevos nombres de clase para ocultar columnas en su sistema de grillas.

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

Los ejemplos son:

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

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

También creo que puedes reemplazar .visible-sm-block con .hidden-xs-down y .hidden-md-up (o .hidden-sm-down y .hidden-lg-up para actuar en las mismas consultas de medios).

hidden-sm-up comstack en:

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

.hidden-sm-down y .hidden-lg-up comstack 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 de la misma manera.

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

Estas clases no intentan acomodarse a casos menos comunes en los que la visibilidad de un elemento no puede expressse como un único rango contiguo de tamaños de punto de interrupción de ventana; en su lugar, deberá 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 viejo mixin de bootstrap, porque está cubriendo 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 archivo _custom.scss que se incluye en este punto 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"; [..] 

Desafortunadamente, estas nuevas clases de bootstrap 4 no funcionan como las anteriores en un div usando collapse ya que configuran el div visible para block que comienza siendo visible en lugar de oculto y si agrega un div adicional alrededor de la funcionalidad de collapse ya no funciona.