bootstrap 4 responsive utilities visible / hidden xs sm lg no funciona

96

Tener un problema con las clases ocultas / visibles de las nuevas utilidades receptivas al migrar a Bootstrap 4 . Soy consciente de que las clases .hidden- se han eliminado de v3 y se han reemplazado con .hidden-*-up .hidden-*-down. Usando las nuevas .hidden-*-up.hidden-*-downclases pero los elementos no cambian a visibles / ocultos. No puedo entender por qué.

<div class="col hidden-xs-down">
    <span class="vcard">
        …
    </span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down">
                …
    </div>
    <div class="hidden-xs-down">
                …
    </div>
</div>

* no hay nada oculto en este ejemplo, independientemente del tamaño de la pantalla (Safari, modo de diseño adaptable)

— Yatko
fuente

2

¿Y tu pregunta es qué? stackoverflow.com/help/how-to-ask

— Rob

@Rob fair;) cambiado.

— Yatko

Debe publicar un ejemplo mínimo del marcado que causa el problema: ejemplo mínimo reproducible No tenemos ni idea de qué son "los elementos".

— Rob

Configure un codepen que contenga Bootstrap 4 y su ejemplo HTML: codepen.io/esr360/pen/prWjYv . Su afirmación de que "no hay nada oculto en este ejemplo, independientemente del tamaño de la pantalla" es incorrecta.

— ESR

@EdmundReed sí, me vuelve loco: lo intenté con un ejemplo simple, funciona en mi mac, deja de funcionar justo después de la sincronización ... probé el caché, incluso un ISP diferente para descartar cualquier almacenamiento en caché

— Yatko

227

Con Bootstrap 4, las .hidden-* clases se eliminaron por completo (sí, fueron reemplazadas por, hidden-*-*pero esas clases también desaparecieron de las versiones alfa v4).

Comenzando con v4-beta, puede combinar clases .d-*-noney .d-*-blockpara lograr el mismo resultado.

visible- * también se eliminó ; en lugar de usar .visible-*clases explícitas , haga visible el elemento sin ocultarlo (nuevamente, use combinaciones de .d-none .d-md-block). Aquí está el ejemplo de trabajo:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs"se convierte en class="d-none d-sm-block"(o d-none d-sm-inline-block ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

Un ejemplo de utilidades de respuesta de Bootstrap 4 :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

codepen.io/_yatko/pen/ZJXQxy

Documentación

— Yatko
fuente

1

La razón por la que no pude encontrar esto, v4 beta se publicó hace un par de días y todos los resultados indexados por Google aún lo llevan a v4-alpha, de alguna manera obtuve el nuevo enlace de CDN pero todo el resto todavía era -alpha

— Yatko

2

Supongo que "d" = display.

— usuario20232359723568423357842364

16

¿Por qué introducirían un cambio tan poco intuitivo y rompedor? alguna explicación?

— szaman

3

@rrrafalsz Me he preguntado lo mismo. Esto parece un paso atrás innecesariamente complicado del anterior "visible-sm-arriba / abajo" que tenían en alfa. Sería interesante conocer el motivo.

— Katai

¿Podrías comentar claramente en tu ejemplo cuáles de los DIV serán visibles y cuáles no? Me tomó un tiempo, y no estoy seguro, si lo comento, si eso estaría bien. gracias

— helle

51

Clase de tamaño de pantalla

-

Oculto en todo .d-none
Oculto solo en xs .d-none .d-sm-block
Oculto solo en sm .d-sm-none .d-md-block
Oculto solo en md .d-md-none .d-lg-block
Oculto solo en lg .d-lg-none .d-xl-block
Oculto solo en xl .d-xl-none
Visible en todos los bloques .d
Visible solo en xs .d-block .d-sm-none
Visible solo en sm .d-none .d-sm-block .d-md-none
Visible solo en md .d-none .d-md-block .d-lg-none
Visible solo en lg .d-none .d-lg-block .d-xl-none
Visible solo en xl .d-none .d-xl-block

Consulte este enlace http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

4.5 enlace: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

— Vinod Chauhan
fuente

1

Si bien esto teóricamente puede responder a la pregunta, sería preferible incluir aquí las partes esenciales de la respuesta y proporcionar el enlace como referencia.

— Rick

6

Bootstrap 4 (^ beta) ha cambiado las clases para ocultar / mostrar elementos sensibles. Consulte este enlace para conocer las clases correctas para usar: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

— jross
fuente

2

Gracias. Bootstrap podría eliminar el contenido antiguo al menos para archivarlo, de modo que los noobs totales (como yo) no tengan que pasar por 123523532 posibles soluciones antes de encontrar esta respuesta en la pila. Durante los últimos años, stack overflow es más útil que google, así que cuando la gente dice use google ... yo digo que no, use stack ... Más rápido y más útil.

— Azul

0

Alguna versión funcionando

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>

— Isa ilimitada
fuente