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


289

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?

Respuestas:


778

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


1
Vi este cambio cuando se lanzó la versión beta y creo que es mucho mejor que en las versiones alfa. Gracias por agregar la respuesta: marcaré como la solución.
johna

22
@johna es peor, aunque. No existe, d-initialpor lo que ya no puede anular d-<breakpoint>-hiddeny establecerlo en su valor inicial. Si quiero ocultar un elemento en pantallas más pequeñas y mostrarlo en las medianas y grandes sin conocer la pantalla inicial (que podría ser dinámica), entonces no puedo restaurar su valor. No pensaron en nada de esto.
Yates

11
La peor actualización de la historia. ¿Cómo se pasa de un concepto "hablador" super intuitivo a algo tan críptico? Abriendo un problema para esto. Al menos podrían haber dejado que coexistieran las viejas clases.
Andreas

44
De hecho, estoy sorprendido de lo difícil que fue encontrar esta respuesta.
Anthony

2
@Andreas Estoy totalmente de acuerdo, este es un diseño pobre en mi opinión
Anthony

35

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.


¿Esto todavía funciona con la versión actual de B4? Esta basura de visibilidad es una de las principales razones por las que no me he molestado en moverme. A veces me confundo mucho cuando programo y esto solo me estaba haciendo la cabeza. (¡Tengo 64 años, así que dame un respiro!) Además (no quiero ser descarado) pero ¿tienes un equivalente para visible? V útil para tener tanto en mi humilde opinión (o la forma en que
codifico de

24

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


4

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

4

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";
[..]

1
¡Muy útil! El modo Bootstrap 4 parece ser un poco un rompecabezas, además de que está agregando lo display: blockque rompe el flujo en ciertos escenarios.
Lucas

3

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


Sí, he utilizado estos en mi ejemplo v4, pero la cuestión es que ahora necesitan varias Div donde en la versión 3 que podría hacer con uno ...
johna

66
Esta solución está desactualizada y solo es válida para Bootstrap V4 Alpha, para Beta y posteriores, desafortunadamente estos deben ser reemplazados como se especifica en los párrafos anteriores
Marc Magon


1

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'


0

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.


0
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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.